OktaAuth Javascript + Flask not sending code & state value to Flask

Question

I am new to okta, javascript. I am trying to add OktaAuth to existing Jquery/javascript + Flask app.

I have configured the following in my Javascript. The redirect calls to server-side callback works. But don't pass code, state values for it to proceed. Can you please let me know what is wrong here? Any help is appreciated.

var authClient = new OktaAuth({
    url: 'https://{okta-url}.com',
    clientId: 'xxxxxx',
    clientSecret: 'yyyyyyyyyy',
    issuer: 'https://{okta-url}.com',
    redirectUri: 'http://{redirect-url}/login'
    //scopes: ['openid', 'email', 'profile']
});

var idToken = authClient.tokenManager.get('idToken');
console.log(JSON.stringify(idToken))
if (idToken) {
    console.log('hi ${idToken.claims.email}!');
}
else if (location.hash) {
    authClient.token.parseFromUrl()
        .then(function (idToken) {
            console.log('hi ${idToken.claims.email}!');
            authClient.tokenManager.add('idToken', idToken);
            console.log(idToken);
        });
    console.log(JSON.stringify(authClient.token))
}
else {
    authClient.token.getWithRedirect({
        responseType: ['id_token', 'code', 'token']
    });
    console.log(authClient.token)
}

score 1 · Answer 1 · answered Dec 09 '17 at 01:45

Warning: It's dangerous to have your client secret in JavaScript code! Exposing a client secret is like revealing your password. You should remove it and consider generating a new client ID/secret just to be safe.

There's two main ways you can use OpenID Connect, which is what OktaAuth uses: with a server-side callback (the code flow), or entirely on the client-side (the implicit flow). You're trying to do both here, which is probably why it's acting weird.

Instead, do this:

var authClient = new OktaAuth({
    url: 'https://{okta-url}.com',
    clientId: 'xxxxxx',
    issuer: 'default', // Use the default Authorization Server
});

var idToken = authClient.tokenManager.get('idToken');

if (idToken) {
    console.log('hi ${idToken.claims.email}!');
}
else if (location.hash) {
    authClient.token.parseFromUrl()
        .then(function (idToken) {
            authClient.tokenManager.add('idToken', idToken);
            console.log(idToken);
        });
}
else {
    authClient.token.getWithRedirect({
        responseType: 'id_token'
        // Use ['id_token', 'token'] if you also need an access token
    });
}

This will get you an ID token that you can use on the client side. Watch the console and network panels for any errors that occur.

OktaAuth Javascript + Flask not sending code & state value to Flask

1 Answers1