My OKTA config:
export const oktaConfig = {
clientId: ${REACT_APP_CLIENT_ID}
,
issuer: https://${REACT_APP_OKTA_DOMAIN}/oauth2/default
,
redirectUri: http://localhost:${REACT_APP_PORT}/login/callback
, // this makes it so redirects to login if not logged in for secure routes
postLogoutRedirectUri: window.location.origin + /login
,
pkce: true,
disableHttpsCheck: true
};
My Routing:
import React, { lazy } from “react”;
import {
Switch,
Route,
BrowserRouter as Router,
Redirect,
} from “react-router-dom”;
import { useHistory } from ‘react-router’;
import { Security, LoginCallback, SecureRoute } from ‘@okta/okta-react’;
import { OktaAuth, toRelativeUrl } from ‘@okta/okta-auth-js’;
import Dashboard from “…/Screens/Dashboard”;
import PrivateRoute from “./ProtectedRoute”;
import { oktaConfig } from “…/Lib/OktaConfig”;
import { AuthModel } from “…/Models/AuthReducerModel”;
import { useSelector } from “react-redux”;
const Login = lazy(() => import("…/Screens/Login"));
interface AuthReducerModel {
AuthReducer: AuthModel
}
export default function NavRoutes() {
const history = useHistory();
const AuthReducer = useSelector((state: AuthReducerModel) => state.AuthReducer);
console.log(AuthReducer);
const oktaAuthConfig = new OktaAuth({
...oktaConfig,
scopes: ['openid', 'profile', 'email']
});
const restoreOriginalUri = async (_oktaAuth: any, originalUri: string) => {
history.replace(toRelativeUrl(originalUri, window.location.origin));
};
const onAuthRequired = () => {
//history.push('/login');
};
return (
<Security
oktaAuth={oktaAuthConfig}
restoreOriginalUri={restoreOriginalUri}
onAuthRequired={onAuthRequired}
>
<Router>
<Switch>
<Route path='/login' component={Login} />
<Route path='/login/callback' component={LoginCallback} />
<PrivateRoute path="/dashboard" component={Dashboard} />
<Redirect from="/" to={AuthReducer.isAuthenticated ? "dashboard" : "login"} />
</Switch>
</Router>
</Security>
)
}
My login onSubmit function:
oktaAuth.signInWithCredentials({ username: email, password: password })
.then(res => {
console.log(res);
const { sessionToken } = res;
if (res.status === ‘SUCCESS’) {
oktaAuth.token.getWithoutPrompt({
responseType: ‘id_token’,
sessionToken,
})
.then((res) => {
const { tokens } = res;
console.log(‘tokens’, tokens)
oktaAuth.tokenManager.setTokens(tokens);
history.push(’/dashboard’);
})
.catch((err) => {
console.log(‘err’, err)
});
}
})
.catch(err => console.log(‘Found an error’, err));
PLEASE HELP ME TO SOLVE MY PROBLEM