Angular Okta SDK receives 400 on POST /token

Questions
1

Hi I created a Google Identity Provider in my developer account. In addition I created an OIDC SPA application name “My Google Okta SPA” with grant type “Authorization Code” and routed with a custom route rule.

When I launch my “Angular” SPA, it routes user to Google’s login correctly. After Google login I’m routed back to my SPA app callback url “http://localhost:4200/login/callback”.

It appears my SPA is making a POST call to retrieve token; however I’m getting a 400 error. Did I configure something incorrectly? See my app detail below:

NOTE: I removed “/” from some urls to bypass 5 link forum restriction.

POST call gets a 400 error:

{
    "0": "https://dev-333333.okta.com/oauth2/aus1jl6tutVEuCKBi5d7/v1/token",
    "1": {
        "method": "POST",
        "headers": {
            "Accept": "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
            "X-Okta-User-Agent-Extended": "@okta/okta-angular/3.1.0 okta-auth-js/4.9.2"
        },
        "body": "client_id=x9x9x9x9x9&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin%2Fcallback&grant_type=authorization_code&code_verifier=ae0ea663035622866f4c1129caa02c194ad8af7351e&code=oU2Q0JZ4NYNrghyfhBoghM4-1rsin9gKQlkHj6oxsbM",
        "credentials": "omit"
    }
}

App Details:

Google Identity Provider:
Name: Google Okta
Type: Google
IdP ID: 0oa1icqbt5FwXGcpN5d7
Authorize URL: https://dev-333333.okta.com/oauth2/v1/authorize?idp=0oa1icqbt5FwXGcpN5d7&client_id={clientId}&response_type={responseType}&response_mode={responseMode}&scope={scopes}&redirect_uri={redirectUri}&state={state}&nonce={nonce}
Redirect URI: https://dev-59407959.okta.com/oauth2/v1/authorize/callback

My Developer Account: https: dev-59407959-admin.okta.com

Routing Rule: “Google Redirect”
Redirect when user is accessing “My Google Okta SPA”

OIDC SPA App:
Type: Angular application using @okta/okta-angular SDK
Name: My Google Okta SPA
Sign-in redirect URIs: http: localhost:4200 login callback
Sign-out redirect URIs: http: localhost:4200

Okta Angular SDK configuration:

  oidc: {
    authorizeUrl: 'https:  dev-333333.okta.com oauth2 v1 authorize',
    issuer: 'https: dev-333333.okta.com oauth2 aus1jl6tutVEuCKBi5d7',
    idp: `${environment.IDP}`,
    clientId: `${environment.CLIENT_ID}`,
    response_type: 'code',
    response_mode: 'fragment',
    redirectUri: 'login/callback',
    scopes: ['openid', 'profile', 'email'],
    pkce: true,
    testing: {
      disableHttpsCheck:  true,
    }
  },
2

You might want to remove some of your information like Okta org url and client_id.

I don’t think your token call is correct. Please take a look at the example from
https://developer.okta.com/docs/guides/implement-grant-type/authcode/main/#exchange-the-code-for-tokens

1 Like
3

Thanks, I removed my Okta org info and client_id.
Note, Okta Angular SDK is constructing and generating the call per my oidc: { … }. config values.

Okta Angular SDK works fine logging in through Okta Hosted login pages but not using the Google login identify provider.

Angular SDK config for Okta Hosted Login pages:

  oidc_1: {
    clientId: `${environment.cCLIENT_ID}`,
    issuer: `${environment.cISSUER}`,
    redirectUri: `/${environment.OKTA_CALLBACK}`,
    scopes: ['openid', 'profile', 'email'],
    pkce: true,
    testing: {
      disableHttpsCheck: `${environment.OKTA_TESTING_DISABLEHTTPSCHECK}`
    }
  },