Log in works but spits a invalid JWT?

JWT.io
, , , ,
1

After “loginWithRedirect” in React i get the access token using getAccessTokenSilently but it does not return a valid JWT

Here we injected the Auth0Provider into the app

import React from "react"
import { useNavigate } from "react-router-dom"
import { Auth0Provider } from "@auth0/auth0-react"

const Auth0ProviderWithHistory = ({ children }) => {
    const domain = process.env.REACT_APP_AUTH0_DOMAIN
    const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID
    const audience = process.env.REACT_APP_AUTH0_AUDIENCE

    const navigate = useNavigate()

    const onRedirectCallback = appState => {
        navigate(appState?.returnTo || window.location.pathname)
    }

    return (
        <Auth0Provider
            domain={domain}
            clientId={clientId}
            onRedirectCallback={onRedirectCallback}
            redirectUri={window.location.origin}
            authorizationParams={{
                audience: audience,
            }}
        >
            {children}
        </Auth0Provider>
    )
}

export default Auth0ProviderWithHistory

Just a button that when you click you’ll get redirected to the login page

import React from "react"
import { useAuth0 } from "@auth0/auth0-react"
import { FiLogIn } from "react-icons/fi"

const LoginButton = () => {
    const { loginWithRedirect } = useAuth0()

    return (
        <div className="user-bar">
            <FiLogIn />
            <div onClick={() => loginWithRedirect()}>Log In</div>
        </div>
    )
}

export default LoginButton

followed this doc Auth0 React SDK Quickstarts: Call an API
if we call the getAccessTokenSilently with 0 parameters it does not change the output

import React, { useEffect } from "react"
import { useAuth0 } from "@auth0/auth0-react"
import { FiLogOut } from "react-icons/fi"
import Cookies from "js-cookie"

const LogoutButton = () => {
    const { logout, user, getAccessTokenSilently } = useAuth0()

    useEffect(() => {
        const getUserMetadata = async () => {
            console.log(process.env.REACT_APP_AUTH0_AUDIENCE)

            try {
                const accessToken = await getAccessTokenSilently({
                    authorizationParams: {
                        audience: process.env.REACT_APP_AUTH0_AUDIENCE,
                        scope: "read:current_user",
                    },
                })
                console.log(accessToken)
                Cookies.set("jwt", accessToken) // Use the access token to authenticate with your backend
            } catch (e) {
                console.log(e.message)
            }
        }

        getUserMetadata()
    }, [getAccessTokenSilently, user])

    const handle_logout = () => {
        logout({
            returnTo: window.location.origin,
        })
        Cookies.remove("jwt")
    }

    return (
        <div className="user-bar">
            <FiLogOut />
            <div onClick={handle_logout}>Log Out</div>
        </div>
    )
}

export default LogoutButton

for reference, this is the JWT

eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cHM6Ly9saXZlc2V5LmV1LmF1dGgwLmNvbS8ifQ…5H1ESxDrgJ3wPane.ti9ZD5erPQ3f731-wNk1m9UzDNU56keOMXzaBrUrE3DvspDI8TDLntZHxdP2xhXYa8Fi4at5cggOzywx07Y0MXWAHdLNTy7Dt9fRFTU6lqR_6YcB0ezKeNueTg4dWVw8uQ2Te8n6Tfy3Syy8ghPW8TWo4vEYLDdJAx-237kzmjkBXsa3MNzKsTmbwbRQOT2nAcpsbT6UWu6HausquKk2JeVnL2Xx8B53voF05ZpEEoDsa1vuzcSRRN2TIUt4HFOpb1y5KSuZhluohDEQ3ldriu4LIPLWqVtBTnRRqcozhlHsD5ENa3dQKWskRFe9t3nyEzOdOQAfBNDWKoN0Vnsku4d7tGW1qVRHqkarBFEC-NcsybadNGTj4bCIUlHvce1wBxNhiv1FHLgpqZHUGdpaNsyMa343gfw.j9QRvNxZN-4Z5Ke-2i-asQ

2

Hi @fyll,

Welcome to the Auth0 Community!

That appears to be an encrypted token. To get a JWT, you need to pass a valid audience param.

More here: Why is my access token not a JWT? (Opaque Token)

4

What version of @auth0/auth0-react are you using?

I had a similiar issue earlier this week where I got an error message saying “invalid compact JWS”. I was trying to access a protected api endpoint using an JWS obtained from the getAccessTokenSilently() method in the client.

I found that the error disappeared when downgrading @auth0/auth0-react from the latest 2.0.1 to 1.10.1.

I’ve made a repo demonstrating the issue here: auth0-sandbox

Please download yourself and see if this works for you. Use package.json to switch between auth0-react versions.

Hope it helps!

5

Hi @paloskar,

Thanks for the suggestion.

Before downgrading, I would suggest requesting a JWT by following the link I provided above.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.