I’m integrating Okta Sign-In Widget into my React Single Page Application (SPA) using the following configuration:
const oktaConfig = {
clientId: "0oanwm6ik72WLFsRc5d7",
issuer: "https://dev-48369164.okta.com/oauth2/default",
redirectUri: "http://localhost:3000/login/callback",
scopes: ["openid", "profile", "email"],
pkce: true,
disableHttpsCheck: true,
};
export default oktaConfig;
import OktaSignIn from "@okta/okta-signin-widget";
import { useEffect, useRef } from "react";
import oktaConfig from "../lib/oktaConfig";
const OktaSignInWidget = ({ onSuccess, onError }) => {
const widgetRef = useRef();
useEffect(() => {
if (!widgetRef.current) {
return false;
}
const widget = new OktaSignIn(oktaConfig);
widget
.showSignInToGetTokens({
el: widgetRef.current,
})
.then(onSuccess)
.catch(onError);
return () => widget.remove();
}, [onSuccess, onError]);
return (
<div className="container mt-5 mb-5">
<div ref={widgetRef}></div>
</div>
);
};
export default OktaSignInWidget;
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Navbar from "./layouts/NavbarAndfooter/Navbar";
import Footer from "./layouts/NavbarAndfooter/Footer";
import HomePage from "./layouts/HomePage/HomePage";
import SearchBooksPage from "./layouts/SearchBooksPage/SearchBooksPage";
import { Redirect, Route, Switch, useHistory } from "react-router-dom";
import BookCheckOutPage from "./layouts/BookCheckOutPage/BookCheckOutPage";
import oktaConfig from "./lib/oktaConfig";
import { toRelativeUrl, OktaAuth } from "@okta/okta-auth-js";
import { Security, LoginCallback } from "@okta/okta-react";
import LoginWidget from "./Auth/LoginWidget";
const oktaAuth = new OktaAuth(oktaConfig);
const App = () => {
const customAuthHandler = () => {
history.push("/login");
};
const history = useHistory();
const restoreOriginalUri = async (_okaAuth: any, originalUri: any) => {
history.replace(toRelativeUrl(originalUri || "/", window.location.origin));
};
return (
<div className="d-flex flex-column min-vh-100">
<Security
oktaAuth={oktaAuth}
restoreOriginalUri={restoreOriginalUri}
onAuthRequired={customAuthHandler}
>
<Navbar />
<div className="flex-grow-1">
<Switch>
<Route path="/" exact>
<Redirect to="/homepage" />
</Route>
<Route path="/homepage">
<HomePage />
</Route>
<Route path="/search">
<SearchBooksPage />
</Route>
<Route path="/checkout/:bookId">
<BookCheckOutPage />
</Route>
<Route
path="/login"
render={() => <LoginWidget config={oktaConfig} />}
/>
<Route path={"/login/callback"} component={LoginCallback} />
</Switch>
</div>
<Footer />
</Security>
</div>
);
};
export default App;