FusionAuth
    • Home
    • Categories
    • Recent
    • Popular
    • Pricing
    • Contact us
    • Docs
    • Login

    React SDK example - nothing in the userInfo but tid and sub

    Scheduled Pinned Locked Moved
    General Discussion
    4
    10
    5.3k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jw 0
      last edited by

      I'm sure I'm doing something stupid here but I can't work out what I haven't done.

      I am using the changebank React SDK example as my test harness, using the community version of FusionAuth for now, hosted under docker
      I've created a new tenant, a new app and then a new user.
      I can login using this new user into the app but the userInfo structure has nothing in it other the the use sub and the tid.

      Config is below

      const config: FusionAuthProviderConfig = {
      clientId: "31067471-23fc-4634-afa9-c049ff4f0a86",
      redirectUri: "http://localhost:5173",
      serverUrl: "http://localhost:9011/",
      shouldAutoFetchUserInfo: true,
      shouldAutoRefresh: true,
      onRedirect: (state?: string) => {
      console.log(Redirect happened with state value: ${state}"});
      }
      };

      Example code is:
      In main.tsx
      const { isLoggedIn, isFetchingUserInfo, userInfo } = useFusionAuth();

      In the AccountPage.tsx I have:

          <p>tid {userInfo?.tid}</p>
          <p>sub {userInfo?.sub}</p>
          <p>roles {userInfo?.roles}</p>
          <p>email {userInfo?.email}</p>
      

      The roles and email fields are always null

      Any ideas?

      mark.robustelliM G 2 Replies Last reply Reply Quote 0
      • mark.robustelliM
        mark.robustelli @jw 0
        last edited by mark.robustelli

        @jw-0, It sounds like you have an existing version of FusionAuth running. Have you been able to spin up the docker instance that comes with the React Quickstart and compare the applications settings. That might be a good place to start.

        Also, in the code for the quickstart I see it provides scopes. You may want to try that as well.

        scope: 'openid email profile offline_access'

        const config: FusionAuthProviderConfig = {
          clientId: "e9fdb985-9173-4e01-9d73-ac2d60d1dc8e",
          redirectUri: "http://localhost:3000",
          postLogoutRedirectUri: "http://localhost:3000/logged-out",
          serverUrl: "http://localhost:9011",
          shouldAutoFetchUserInfo: true,
          shouldAutoRefresh: true,
          onRedirect: (state?: string) => {
            console.log(`Redirect happened with state value: ${state}`);
          },
          scope: 'openid email profile offline_access'
        };
        
        J 1 Reply Last reply Reply Quote 0
        • J
          jw 0 @mark.robustelli
          last edited by

          Thanks @mark-robustelli - it was just I hadn't included the scopes!

          I can see everything I want in the userInfo structure other than the roles.
          Is this something I have to do manually? I've looked at the JS SDK code and it seems to be only giving me what comes back in the call to /me

          However, they are in the JWT as I'd expect
          {
          "aud": "3c219e58-ed0e-4b18-ad48-f4f92793ae32",
          "exp": 1724955478,
          "iat": 1724955418,
          "iss": "localhost:9011",
          "sub": "75359739-1fb2-4f64-9116-37f67a47a231",
          "jti": "6c1935e3-0428-4a09-8651-849e1140fe04",
          "authenticationType": "REFRESH_TOKEN",
          "roles": [
          "admin"
          ],
          "auth_time": 1724954534,
          "scope": "offline_access",
          "applicationId": "3c219e58-ed0e-4b18-ad48-f4f92793ae32",
          "tid": "188a3b31-5d90-bbf8-75dc-94b9e004b1ba",
          "sid": "aed93b0a-b993-4fde-98f9-8b274b723dde"
          }

          mark.robustelliM 1 Reply Last reply Reply Quote 0
          • mark.robustelliM
            mark.robustelli @jw 0
            last edited by mark.robustelli

            @jw-0 Looking at the React SDK ReadMe under the Protecting Content section I do see some discussion about Roles.

            It says you need to use the RequireAuth component:

            import { RequireAuth, useFusionAuth } from '@fusionauth/react-sdk';
            

            Then you can do something like:

            const AdminPanel = () => (
              <RequireAuth withRole="admin">
                <button>Delete User</button> // Only displays if user is authenticated and has 'admin' role
              </RequireAuth>
            );
            

            Does that help?

            J 1 Reply Last reply Reply Quote 0
            • J
              jw 0 @mark.robustelli
              last edited by

              @mark-robustelli

              If I do this:
              <RequireAuth withRole="owner">
              I am the owner!
              </RequireAuth>

              I don't see anything displayed on the page even though my login has the owner role.

              I've also go the following on the page:

                  <p>roles {userInfo?.roles}</p>
              

              And this is always empty.
              If I look at the network call to /me in Chrome devtools I see this:

              {
              "email": "jason@",
              "email_verified": true,
              "family_name": "Last",
              "given_name": "First",
              "locale": "af",
              "middle_name": "Middle",
              "name": "Jason Test customer owner",
              "preferred_username": "jason@
              ",
              "sub": "26ffd6b7-cbb3-4234-9a16-5ad8b7d6c6bc",
              "tid": "03c94007-732e-48f4-88c4-d53e5a777e47",
              "zoneinfo": "Africa/Abidjan"
              }

              Looking at the SDK source the code seems to simply turn this into the JS userInfo object so it looks like the roles will never be set

              mark.robustelliM 1 Reply Last reply Reply Quote 0
              • mark.robustelliM
                mark.robustelli @jw 0
                last edited by

                @jw-0 Did you add RequireAuth to the import statement?

                J 1 Reply Last reply Reply Quote 0
                • J
                  jw 0 @mark.robustelli
                  last edited by

                  @mark-robustelli

                  Yes I did.

                  import { useFusionAuth, RequireAuth } from "@fusionauth/react-sdk";

                  1 Reply Last reply Reply Quote 0
                  • G
                    growaway10 @jw 0
                    last edited by

                    @jw-0 said in React SDK example - nothing in the userInfo but tid and sub:

                    I'm sure I'm doing something stupid here but I can't work out what I haven't done.

                    I am using the changebank React SDK example as my test harness, using the community version of FusionAuth for now, hosted under docker
                    I've created a new tenant, a new app and then a new user.
                    I can login using this new user into the app but the userInfo structure has nothing in it other the the use sub and the tid.

                    Config is below

                    const config: FusionAuthProviderConfig = {
                    clientId: "31067471-23fc-4634-afa9-c049ff4f0a86",
                    redirectUri: "http://localhost:5173 solar smash",
                    serverUrl: "http://localhost:9011/",
                    shouldAutoFetchUserInfo: true,
                    shouldAutoRefresh: true,
                    onRedirect: (state?: string) => {
                    console.log(Redirect happened with state value: ${state}"});
                    }
                    };

                    Example code is:
                    In main.tsx
                    const { isLoggedIn, isFetchingUserInfo, userInfo } = useFusionAuth();

                    In the AccountPage.tsx I have:

                        <p>tid {userInfo?.tid}</p>
                        <p>sub {userInfo?.sub}</p>
                        <p>roles {userInfo?.roles}</p>
                        <p>email {userInfo?.email}</p>
                    

                    The roles and email fields are always null

                    Any ideas?

                    It seems like your FusionAuth configuration might be missing the correct user claims scope, which is why only sub and tid are populated in userInfo.

                    Here are a few steps to check:

                    Scopes: Ensure your FusionAuth application has the correct scopes assigned (like email and roles). In FusionAuth, go to Applications > [Your App] > OAuth and add scopes like email and roles.

                    Claims Mapping: Confirm that the user’s email and roles are set to be included in the userInfo claims. Go to Tenants > [Your Tenant] > JWT and ensure those fields are mapped to the JWT.

                    User’s Roles: Ensure the user has roles assigned in Users > [Your User] > Registrations and check that the roles are linked to the application.

                    After updating these settings, try logging in again to see if the userInfo structure includes email and roles.

                    1 Reply Last reply Reply Quote 0
                    • C
                      charlotteharrison0913
                      last edited by

                      After logging in, inspect the JWT token returned by FusionAuth. You can decode it using a tool like jwt.io to see what claims are included. This can help you understand what data is being returned. Review the implementation of the ChangeBank React SDK example to ensure that it correctly handles the userInfo endpoint. There may be specific configurations or calls that need to be made to retrieve additional user data https://fusionauth.io/community/forum/topic/2754 slope run

                      1 Reply Last reply Reply Quote 0
                      • C
                        charlotteharrison0913
                        last edited by

                        @jw-0 said in React SDK example - nothing in the userInfo but tid and sub:

                        I'm sure I'm doing something stupid here but I can't work out what I haven't done.

                        I am using the changebank React SDK example as my test harness, using the community version of FusionAuth for now, hosted under docker
                        I've created a new tenant, a new app and then a new user.
                        I can login using this new user into the app but the userInfo structure has nothing in it other the the use sub and the tid.

                        Config is below

                        const config: FusionAuthProviderConfig = {
                        clientId: "31067471-23fc-4634-afa9-c049ff4f0a86",
                        redirectUri: "http://localhost:5173", slope run

                        serverUrl: "http://localhost:9011/",
                        shouldAutoFetchUserInfo: true,
                        shouldAutoRefresh: true,
                        onRedirect: (state?: string) => {
                        console.log(Redirect happened with state value: ${state}"});
                        }
                        };

                        Example code is:
                        In main.tsx
                        const { isLoggedIn, isFetchingUserInfo, userInfo } = useFusionAuth();

                        In the AccountPage.tsx I have:

                            <p>tid {userInfo?.tid}</p>
                            <p>sub {userInfo?.sub}</p>
                            <p>roles {userInfo?.roles}</p>
                            <p>email {userInfo?.email}</p>
                        

                        The roles and email fields are always null

                        Any ideas?

                        In FusionAuth, ensure that the user claims are set up correctly. Go to the tenant settings and check the "User Claims" section to confirm that the necessary claims (like email, name, etc.) are included. Make sure that your application is requesting the correct scopes during the authentication process. Common scopes include openid, profile, and email. Verify that these scopes are included in your authentication request. Review the ChangeBank React SDK example to ensure it correctly handles the userInfo endpoint. There may be specific configurations or API calls that need to be made to retrieve additional user data.

                        1 Reply Last reply Reply Quote 0
                        • C charlotteharrison0913 referenced this topic on
                        • First post
                          Last post