Add External IdP through React app: Creating the Authorization URL

Questions
1

I’m following the guide for Adding an External Identity Provider and building a React app that closely resembles the example in okta-hosted-login. My goal is to use Google as an identity provider to have the user sign in with Google and then retrieve basic profile information (e.g., name, email) Specifically I have:

  1. Created an OIDC
  2. Set client ID and issuer environment variables
  3. Created a Google App API app
  4. Added Google as identity provider and copied in IdP’s client ID and client secret

When I get to the step titled “Create the Authorization URL” I’m told to create a URL using the template from the Okta Identity provider I created in step 2. Unfortunately every time I try to hit this URL I receive the message pkce code challenge is required when the token endpoint authentication method is 'none'.

Some of the relevant bits of code:

const config = {
  oidc: {
    clientId: CLIENT_ID,
    issuer: ISSUER,
    redirectUri: "http://localhost:3000/implicit/callback",
    scopes: ["openid", "profile", "email"],
    pkce: true,
    disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
  },
};

const App = () => {
  return (
    <Router>
      <Security {...config.oidc}>
        <div className="App">
          <Header />
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/about" component={About} />
            <Route path="/signup" component={SignupForm} />
            <Route path="/implicit/callback" component={LoginCallback} />
          </Switch>
        </div>
      </Security>
    </Router>
  );
};

const url = `${
    process.env.ISSUER
  }/oauth2/v1/authorize?idp=0oa519z9bddSRUX7b4x6&client_id=${
    process.env.CLIENT_ID
  }&response_type=code&response_mode=fragment&scope=openid profile email&redirect_uri=https://dev-744996.okta.com/oauth2/v1/authorize/callback&state=${Math.ceil(
    Math.random() * 100
  )}&nonce=${Math.ceil(Math.random() * 100)}`;

Everything I have written thus far, aside from interpolating the variables into the url, is taken from Okta guides. It’s true that my authorization URL does not have the code_challenge_method and code_challenge parameters, however the External IdP guide also does not include them. All that said I can’t seem to understand how to take the code from the guides and get them to support an external identity provider like Google.

What am I missing that will allow me to complete this flow using an external identity provider?

1 Like
2

We have a need for this functionality as well. We have an internally created IdentityServer (OAuth 2.0 / OIDC compliant) and would like to add it as an external IdP. However, the Okta external IdP configuration pages do not support passing along the code_challenge parameter which is required by our IdP. Is there perhaps an API call where we could set that value or can you update the interface to allow the code_challenge to be passed to the external IdP?