Why my token has 2 dots (..) in it?

JWT.io
1

I’m using apollo server, Auth0 and jwt/jwksClient for my app authentication.

When I look at the token my front end is sending to the back-end it has 2 dots inside which indicates its only signed. When decrypting in the back-end, jwt tells me the token is malformed.

I don’t know why its giving me this result. Any help?

Token:

eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cHM6Ly9kZXYteWpkczdzMHcudXMuYXV0aDAuY29tLyJ9..-If5niecxqNWV7WB.VDV1LEr9TUkijSNg9-lN7trsW1ymaFxSOcVB6uDPFBofjtAF_cDXPzwg1Q7d0RtfIi6nXzwNExsd9TNyyW4dOmPYlrdrd80NYGeof7VuPxU0RdItqjj3gydAGodY_C3iT10EekryAzuETF-O8BSBf4aS7NPISHC34TJYg_dTw4ZwaQBj_ry0fCn2RFTBU8yQlEFf7DxrS0TCC3P4FMDys6JDEyKm3_2UuAyTHBY0ZZLB_5qpEmAZRH5mcs5KSnlYPd-QjrHHLCEFAq860rUyYV3HgXCm1zd_9ELX6z5ODdrQaSKBKHLxsu4iLxXDXk4Ec4U.0AGGCtcmx4KOYrJsKwAEpw

Front end code:

import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { useAuth0 } from '@auth0/auth0-react';

import { config } from '../../env';

function ApolloWrapper({ children }) {
  const { isAuthenticated, getAccessTokenSilently } = useAuth0();
  const [bearerToken, setBearerToken] = useState('');

  useEffect(() => {
    const getToken = async () => {
      try {
        const token = isAuthenticated ? await getAccessTokenSilently() : '';
        setBearerToken(token);
        console.log(token);
      } catch (err) {
        console.log('Failed to fetch token', err);
      }
    };
    if (isAuthenticated) {
      getToken();
    } else {
      setBearerToken('');
    }
  }, [getAccessTokenSilently, isAuthenticated]);

  const httpLink = new HttpLink({ uri: config.GRAPHQL_URI });

  const authLink = setContext((_, { headers, ...rest }) => {
    if (!bearerToken) return { headers, ...rest };
    return {
      ...rest,
      headers: {
        ...headers,
        authorization: `Bearer ${bearerToken}`,
      },
    };
  });

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: authLink.concat(httpLink),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

export default ApolloWrapper;
3

Hi there @dominic.bouchard.355 welcome to the community!

It looks like you’re attempting to use an opaque access token (lacking an audience) - Which can only be used against the userinfo endpoint. You’ll need to use authorizationParams on your front end to pass an audience param.

https://community.auth0.com/t/what-is-the-audience/71414

Hope this helps!

4

Hey, thank you! I don’t know why all the examples I saw online were not using the autorizationParams and still working??!

Anyhow, I was on this problem for the last day and half. Here’s my updated code :slight_smile:

import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { useAuth0 } from '@auth0/auth0-react';

import { config } from '../../env';

function ApolloWrapper({ children }) {
  const { isAuthenticated, getAccessTokenSilently } = useAuth0();
  const [bearerToken, setBearerToken] = useState('');

  useEffect(() => {
    const getToken = async () => {
      try {
        const options = { authorizationParams: { audience: config.REACT_APP_AUDIENCE } }; //modification here
        console.log(options);
        const token = isAuthenticated ? await getAccessTokenSilently(options) : '';
        setBearerToken(token);
        console.log(token);
      } catch (err) {
        console.log('Failed to fetch token', err);
      }
    };
    if (isAuthenticated) {
      getToken();
    } else {
      setBearerToken('');
    }
  }, [getAccessTokenSilently, isAuthenticated]);

  const httpLink = new HttpLink({ uri: config.GRAPHQL_URI });

  const authLink = setContext((_, { headers, ...rest }) => {
    if (!bearerToken) return { headers, ...rest };
    return {
      ...rest,
      headers: {
        ...headers,
        authorization: `Bearer ${bearerToken}`,
      },
    };
  });

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: authLink.concat(httpLink),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

export default ApolloWrapper;
1 Like
5

No problem, glad that’s sorted! Thanks for sharing your updated code :slight_smile:

6

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