Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Tiago Loriato
    Hey :)
    Ivan Franchin

    Hi, I've tried to update my project (https://github.com/ivangfr/springboot-react-keycloak) to @react-keycloak/web from 2.1.1 to 3.0.0.

    I have realized that there are some breaking changes like:

    1. from KeycloakProvider to ReactKeycloakProvider
    2. the HOC withKeycloak doesn't exist anymore and there is now useKeycloak hook

    Change from KeycloakProvider to ReactKeycloakProvider is straight forward.
    However, by removing withKeycloak, considering that my app has a lot of React Components and I am not an expert in React, in order to make my app run in version 3.0.0, I needed to create my own HOC, like:

    import React from 'react'
    import { useKeycloak } from '@react-keycloak/web'
    function withKeycloak(Component) {
      return function WrappedComponent(props) {
        const keycloak = useKeycloak()
        return <Component {...props} keycloakInitialized={keycloak.initialized} keycloak={keycloak.keycloak} />
    export default withKeycloak

    Is this the correct approach? Thanks!

    Mattia Panzeri
    Hi @ivangfr ,
    Yeah, I’d say that’s the correct approach to turn the hook API into an HOC
    I’ll work to have an “official” version of it in the modules ASAP... the main difference between yours and the “official” one will be Typescript I guess 😁
    Cem Nura

    Hi @panz3r,

    I have been trying to implement react keycloak with typescript and everything is running great. Thanks for your hard work.

    I'm having difficulties accessing additional claims in the idToken. For example I am trying to receive the picture claim which can be found in IdTokenParsed.

    acr: "1"
    at_hash: "WMx6XKo5NaqnzkbW2xc-zg"
    aud: "react-test"
    auth_time: 1606224812
    azp: "react-test"
    email: "cem.nura@cem.com"
    email_verified: false
    exp: 1606225112
    family_name: "Nura"
    given_name: "Cem"
    iat: 1606224812
    iss: "http://localhost:8181/auth/realms/Test"
    jti: "e8e9fbfb-3068-40d6-8eb3-98638e7415f7"
    name: "Cem Nura"
    nonce: "f954b843-2817-423c-b77b-aced0aa82c8d"
    picture: "https://icon-library.com/images/google-user-icon/google-user-icon-7.jpg"
    preferred_username: "cemnura"
    session_state: "65b8e57c-48b2-4a9d-af79-ee9c7a61d5e5"
    sub: "2ca2b188-6218-4cdc-a1eb-76ac18c45f48"
    typ: "ID"

    When I try to access the picture claim I get an error such as;

    Object is possibly 'undefined'.  TS2532

    Every IdToken may not include a picture claim since it is not mandatory. However, how would you recommend to retrieve additional claims either then the ones defined in the KeycloakTokenParsed interface.


    I was able to retrieve the picture claim with a hacky code;

    <Image src={(keycloak?.idTokenParsed as any).picture} />

    Which looks and feels sketchy.

    Thanks again

    Mattia Panzeri
    Hi @cemnura ,
    Sorry for the late answer.
    Mattia Panzeri

    Unfortunately I think that the way you implemented it is the only one to access data inside the idTokenParsed since it is typed this way

        interface KeycloakTokenParsed {
            exp?: number;
            iat?: number;
            nonce?: string;
            sub?: string;
            session_state?: string;
            realm_access?: KeycloakRoles;
            resource_access?: KeycloakResourceAccess;

    thus not allowing any custom parameter.

    I'd suggest you to add a ?. to the extraction to avoid issue when idTokenParsed might be undefined, like this

    (keycloak?.idTokenParsed as any)?.picture
    Cem Nura

    Hello @panz3r ,

    Thanks for you answer.

    Yes I added added

    picture?: string:

    to KeycloakTokenParsed to better understand and it worked as expected.

    picture claim is not a mandatory in id token. Hence, adding it to the interface would not be ideal I just tested it out.

    I will use the ?. as you said. Thanks for the pointer :)

    hey guys i have no issues running the example for react-native, but when i enable PKCE on my realm and then add pkceMethod with the value 'S256' to my initOptions and i get the error "missing parameter: code_challenge_method"
    Screen Shot 2021-01-22 at 4.21.33 PM.png
    Screen Shot 2021-01-22 at 4.23.18 PM.png
    i opened an issue that has the step by step: react-keycloak/react-native-keycloak#29