I'm trying to add OKTA to my React application. I've gotten sign-in to work fine. But I'm struggling with Signout.
Setup: I added OKTA to my project following these instructions from OKTA.
This mostly worked, but included these instructions for invoking the sign-in
const { authState, authService } = useOktaAuth();
const login = () => authService.login('/profile');
authService could not be found. So I went to the OKTA Example and changed it to
const { authState, oktaAuth } = useOktaAuth();
const login = async () => oktaAuth.signInWithRedirect();
This also means that
authService.signOut();
changed to
oktaAuth.signOut();
Problem:
As I said above I'm able to login just fine. authState.isAuthenticated resolves to True.
However when I try to sign out, React reports an "Unhandled Rejection (AuthApiError)" error:
The console reports these errors:
Access to XMLHttpRequest at 'https://dev-7869221.okta.com/oauth2/default/v1/revoke' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST https://dev-7869221.okta.com/oauth2/default/v1/revoke net::ERR_FAILED
Uncaught (in promise) AuthApiError
I cloned the OKTA example code down, and hard-coded in my application details. Login/Logout works just fine on the demo app. When I log out the configuration object, they match. So I conclude:
- My OKTA Application is configured correctly.
- The Sample app is doing something I haven't noticed
- The OKTA Documentation is out of date for these details.
For completeness my source code and package.json are below.
The application was created with create-react-app using the typescript template.
export const config = {
clientId,
issuer: `https://${domain}/oauth2/default`,
redirectUri: 'http://localhost:3000/login/callback',
scopes: ['openid', 'profile', 'email'],
pkce: true,
disableHttpsCheck: false,
};
const oktaAuth = new OktaAuth(config);
const CALLBACK_PATH = '/login/callback';
function App() {
return (
<Router>
<Security oktaAuth={oktaAuth}>
<Switch>
<Route path={CALLBACK_PATH} component={LoginCallback}/>
<Route path={'/'} component={Main} exact/>
<Route path={'/orgList'} component={OrgList}/>
</Switch>
</Security>
</Router>
);
}
export default App;
import React from 'react';
import { useOktaAuth } from '@okta/okta-react';
function Main() {
const { authState, oktaAuth } = useOktaAuth();
const login = async () => oktaAuth.signInWithRedirect();
const logout = async () => oktaAuth.signOut();
if( authState.isPending ) {
return (
<>
<div>Loading authentication...</div>
</>
);
} else if( !authState.isAuthenticated ) {
return (
<>
<div>
<button onClick={login}>Login</button>
</div>
</>
);
}
return (
<>
<button onClick={logout}>Logout</button>
</>
);
}
export default Main;
{
"name": "okta-test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@okta/okta-auth-js": "^4.5.0",
"@okta/okta-react": "^4.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"@types/jest": "^26.0.19",
"@types/node": "^12.19.9",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"@types/react-router-dom": "^5.1.6",
"cross-env": "^7.0.3",
"react-scripts": "4.0.1",
"typescript": "^4.1.3"
},
"scripts": {
"start": "cross-env PORT=3000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}