Why is email/password authentication failing on express-jwt

Please include the following information in your post:

Gatsby client using ApolloClient

const httpLink = new HttpLink({ uri: process.env.API_DOMAIN, });

const authMiddleware = new ApolloLink((operation, forward) => {
	// Add the authorization to the headers
	operation.setContext({
		headers: {
			authorization: tokens.accessToken,
		}
	});

	return forward(operation);
});

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

client.query({
		query: gql`
			query eventQuery {
				events {
					_id
					title
					description
					date
				}
			}
		`}
	).then(result => console.log(result));

Express server

index.js

const checkJwt = jwt({
    	// Dynamically provide a signing key based on the [Key ID](https://tools.ietf.org/html/rfc7515#section-4.1.4) header parameter ("kid") and the signing keys provided by the JWKS endpoint.
    	secret: jwksRsa.expressJwtSecret({
    		cache: true,
    		rateLimit: true,
    		jwksRequestsPerMinute: 5,
    		jwksUri: `https://${process.env.AUTH0_DOMAIN}/.well-known/jwks.json`
    	}),
    	// Validate the audience and the issuer.
    	audience: process.env.AUTH0_AUDIENCE,
    	issuer: `https://${process.env.AUTH0_DOMAIN}/`,
    	algorithms: [ 'RS256' ],
    	getToken: function fromHeaderOrQuerystring(req) {
    		if (req.headers.authorization) {
    			return req.headers.authorization;
    		}
    		return null;
    	}
    });

app.use(
	'/graphql',
	checkJwt,
	graphqlHTTP({
		schema,
		rootValue: resolvers,
		context,
	}),
);

The client logged in using email and password. I’m sending the authorization token on the HTTP header. What else does the client need to send over to express-jwt to pass authentication?

The server is replying with 401 Unauthorized. How can I figure out the reason for this? Is debugging and running the code step by step the only way or does express-jwt provide some way to figure out the reason for failure? Logs maybe?

Cheers,
André Casal

Hi @andrecasal,

Looking at your screenshot, it looks like the authorization request header might be an opaque token instead of a JWT. Your app will receive an opaque token from Auth0 when a registered API is not specified as the audience in the authentication request. This opaque token is used for your Auth0 tenant’s /userinfo endpoint.

In order to get a JWT as the Access Token that your API can decode and use for authorization, you’ll need to:

  1. Register your API from your Auth0 dashboard: Register APIs
  2. Use the API identifier as the audience in the Auth0Provider:
ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience} // <- add audience
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
    useCookiesForTransactions={true}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);