How to get token

[abdulk1]

I have a React application integrated with this library. I can trigger the auth endpoint by calling signinRedirect. The redirect works. I can sign in and get redirected back to my app as expected.

Now I need to trigger the token endpoint but the documentation doesn't specify how to do that.

[zach-betz-hln]

The token endpoint is usually called as part of the auth.signinRedirect() flow.

Can you say more about what you're looking for? Do you need the access_token? Or something else?

[LethargicDeveloper]

I believe I have the same or similar question.

Let's say we have a react frontend, an api backend (mine is .net core), and a keycloak server and I want to implement authorization code flow.

My understanding of how the flow should work is the following:

1. User clicks login on the React webapp and is redirected to Keycloak
2. The user logs into keycloak and is redirected back to the valid redirect url (back to the react web app) with an authorization code
3. The react web app sends the authorization code it received from keycloak to the api backend to exchange it for an access token.
4. The frontend uses that access token to make further requests against the api.

My knowledge of oauth/openid connect is pretty surface level. Isn't signinRedirect using more of a hybrid flow, which is less secure? Maybe I'm off base here. I'm trying to figure out how this should work.

[zach-betz-hln]

@LethargicDeveloper - if you're using Authorization Code Grant with Proof Key for Code Exchange (PKCE) then this diagram may help with understanding the flow.

[idc77]

Essentially, react-oidc-context handles 3. (and 2. and 1.) automatically. For 4. here's a snippet I have in my RelayEnvironment.ts (from relay.dev)

import {oidcConfig} from './oidc-config.ts';
import {User} from 'oidc-client-ts';

// ...

const HTTP_ENDPOINT = import.meta.env.VITE_HTTP_ENDPOINT;

function getUser() {
  let oidcStorage = localStorage.getItem(`oidc.user:${oidcConfig.authority}:${oidcConfig.client_id}`)
  if (!oidcStorage) {
    oidcStorage = sessionStorage.getItem(`oidc.user:${oidcConfig.authority}:${oidcConfig.client_id}`)
    if (!oidcStorage) {
      return null;
    }
  }

  return User.fromStorageString(oidcStorage);
}

const fetchFn: FetchFunction = async (request, variables) => {
  const user = getUser()
  const access_token = user?.access_token

  const headers = new Headers()
  headers.set("Accept", "application/graphql-response+json; charset=utf-8, application/json; charset=utf-8")
  headers.set("Content-Type", "application/json; charset=utf-8")
  if (access_token) {
    headers.set("Authorization", `Bearer ${access_token}`)
  }

  const resp = await fetch(HTTP_ENDPOINT, {
    method: "POST",
    headers: headers,
    body: JSON.stringify({
      query: request.text, 
      variables,
    }),
  });

  return await resp.json();
};

oidc-config.ts

import {UserManagerSettings} from 'oidc-client-ts';

export const oidcConfig: UserManagerSettings = {
    authority: import.meta.env.VITE_OIDC_AUTHORITY,
    client_id: import.meta.env.VITE_OIDC_CLIENT_ID,
    redirect_uri: import.meta.env.VITE_OIDC_REDIRECT_URI,
    scope: import.meta.env.VITE_OIDC_SCOPE,
}

.env.development

VITE_HTTP_ENDPOINT=http://localhost:8081/query
VITE_OIDC_AUTHORITY='https://my.idp.domain.tld/auth/realms/realm_name'
VITE_OIDC_CLIENT_ID='client-id'
VITE_OIDC_REDIRECT_URI: 'http://localhost:5173'
VITE_OIDC_SCOPE='openid email profile roles'