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

[dominic.bouchard.355]

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;

[tyf]

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.

What is the Audience?

Question: What is the Audience? Answer: The audience parameter exists as part of the OAuth2.0 protocol. You can read more information from the specification here. What is it? The audience (presented as the aud claim in the access token) defines the intended consumer of the token. This is typically the resource server (API, in the dashboard) that a client (Application) would like to access. It can be added to the request to authorize i.e. audience: 'https://test-api' Here is an example where …

Hope this helps!

[dominic.bouchard.355]

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

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;

[tyf]

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