Provide example of how to use keycloak

[vincentsong]

Could you please provide an example app to show how to use this lib with keycloak?

[frikyfriky11]

Hey there! I'm experimenting with Keycloak too, and I landed on this GitHub repository.

I'm still trying to learn how this entire Keycloak + React-OIDC works, but so far I managed to get the authentication working by using these settings in my App.tsx:

import { AuthProvider, AuthProviderProps } from "react-oidc-context";

import MainRouter from "./router";

const oidcConfig: AuthProviderProps = {
  authority: "https://your-keycloak.example.com/realms/your-realm", // replace your-keycloak and your-realm
  client_id: "your-client-id", // replace your-client-id
  redirect_uri: "http://localhost:5173", // replace this with the URL of your application, probably injected depending on the environment... here I'm using Vite and this is the URL of the development server
  onSigninCallback: (): void => {
    window.history.replaceState({}, document.title, window.location.pathname);
  },
};

export default function App() {
  return (
    <AuthProvider {...oidcConfig}>
      <MainRouter />
    </AuthProvider>
  );
}

Then in a page you can do as suggested in the documentation:

import { useAuth } from "react-oidc-context";

export default function Dashboard() {
  const auth = useAuth();

  switch (auth.activeNavigator) {
    case "signinSilent":
      return <div>Signing you in ...</div>;
    case "signoutRedirect":
      return <div>Signing you out ...</div>;
  }

  if (auth.isLoading) {
    return <div>Auth is loading...</div>;
  }

  if (auth.error) {
    return <div>Oops... Auth error {auth.error.message}</div>;
  }

  if (auth.isAuthenticated) {
    return (
      <div>
        Hello {auth.user?.profile.name}{" "}
        <button onClick={() => void auth.removeUser()}>Log out</button>
      </div>
    );
  }

  return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
  );
}

I agree that it would be useful to have some kind of Wiki page on the repo explaining how to setup correctly this library depending on the auth provider used.

Maybe we can arrange something like that?

[vincentsong]

Thank you @frikyfriky11, your solution is working like a charm.

[Rafael-Ramblas]

Does someone had problems with issuing the token? Sometimes the /token route just returns Code not valid and no useful message in the terminal

[luisfagottani]

Guys and about roles? How can i get access this from react-oidc-context?

[pamapa]

@luisfagottani maybe https://github.com/authts/react-oidc-context/issues/872 helps you

[Sax388]

@frikyfriky11 I tried to replicate your setup but just nothing happens as of yet. Something seems to be missing. then I forgot to add the actual sign in (e.g. autosignin from the README.md). Could you share a minimal viable project for Keycloak?

It could be added to https://github.com/authts/oidc-client-ts/blob/main/docs/index.md#provider-specific-settings an example folder in the repository then.

EDIT I'm still struggling a little with making the redirect work correctly but at least it's working apart from that. So thanks a lot for sharing the configuration.

[frikyfriky11]

@Sax388 this was something I worked on briefly a couple of months ago and I don't have a ready-to-share minimal viable project right now. Maybe the repo owners could consider giving us an opinion on this, so maybe I could send a PR to integrate this into the official docs of this library if this is something that is well received :)

[zach-betz-hln]

In case it's helpful: https://github.com/authts/react-oidc-context/issues/1208