Help understanding flow with Okta-React and okta-auth-js to get Id Token

Questions
1

Hello,

I am trying to figure out the correct flow and process to obtain an ID Token containing a user’s groups in a React app. I am using @okta/okta-react and @okta/okta-auth-js in my app.

On index.js I have the following code and it works to redirect after login to the authorize endpoint and I get an Id Token back in the browser’s location bar. How do I access and use it? Also after I get the Id Token back, I get a blank page, it doesn’t seem to be redirecting.

On auth.js I am trying to use @okta/okta-react to get the IdToken, but it returns an error, TypeError: oktaAuth.getIdToken().then is not a function.

My goal is to get, and use, what is returned from,
https://{dev-123456.okta.com}/oauth2/v1/authorize?client_id={clientID}&response_type=id_token&scope=openid%20groups&redirect_uri=http://localhost:3000/login/callback&state=myState&nonce=myNonceValue

What am I missing or doing wrong? Any help would be appreciated.

index.js

    const restoreOriginalUri = async (_oktaAuth, originalUri) => {
        window.location = 'https://{dev-123456.okta.com}/oauth2/v1/authorize?client_id={clientID}&response_type=id_token&scope=openid%20groups&redirect_uri=http://localhost:3000/login/callback&state=myState&nonce=myNonceValue';
    };
    return (
            <BrowserRouter history={history}>
                    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
                            ...
                            <App />
                            ...   
                    </Security>
            </BrowserRouter>
    );

auth.js

    const { authState: {isAuthenticated, isPending, accessToken}, oktaAuth } = useOktaAuth();
    useEffect(() => {        
            oktaAuth.getIdToken().then(idtoken => {
                    console.log('getIdToken', idtoken);
            })
    }, [isAuthenticated, isPending, oktaAuth, user, accessToken]);
2

What if you just use oktaAuth.getIdToken() without the then() function? Similar to what’s shown in the sample app:

3

That worked, oktaAuth.getIdToken() but the returned token does not include the Groups claim like it does when hitting the /v1/authorize endpoint.

4

It looks like you’re following the guide from Add a Groups claim for the Org Authorization Server | Okta Developer to setup groups claim for the Org authorization server.

The Okta library uses the PKCE so only minimal claims are returned. In order to retrieve the list of groups, you would need to make a request to the /userinfo endpoint, which you can use token.getUserInfo. (GitHub - okta/okta-auth-js: The official js wrapper around Okta's auth API) Also, I would confirm that you have “groups” included in the scopes config.

1 Like
5

Hello,

Is there another way to add ‘groups’ to my scope for the getUserInfo() call? When I add it to the config, I get an error. OAuthError: One or more scopes are not configured for the authorization server resource. Setting up an Auth Server is not an option to me even though I can use one in my dev instance of Okta… I am unable to use one in the Production instance.

config.js

const config = {
oidc: {
	clientId: CLIENT_ID,
	issuer: ISSUER,
	redirectUri: REDIRECT_URI,
	scopes: ['openid', 'profile', 'email', 'groups'],
	pkce: true,
	disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
},
resourceServer: {
	    messagesUrl: `${window.location.origin}/api/messages`,
    },
};

auth.js

oktaAuth.token.getUserInfo().then(info => {
	console.log('token.getUserInfo', info);
})
6

Assuming you’re still using the same issuer (https://dev-123456.okta.com), can you confirm if the name of the groups claim matches what you can configured on the Sign On tab of the Okta app settings?

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.