Auth0 Home Blog Docs

React with Node JS backend


#1

I’m trying to authenticate an app that uses React with Node JS/Express as a backend. I can Login through Auth0 with React and a callback to the React app. However, I need to reauthenticate the login inside the Node backend application. Is there a way to do this? I’m thinking something like:

  1. Client sends an Auth0 token to backend.
  2. Backend queries Auth0 machine to machine to verify token.
  3. If token is valid, backend expects Auth0 token with every client request.

Is this the way to accomplish my task? Are there details for doing this? Am I completely off base?

Thanks.


#2

You’re right on track. We have a quickstart with the exact scenario you’re describing: See here:


#3

Thanks Luis. Sorry if I’m not getting this.

server.js in the quick start example uses this function to verify a KID. Is there example client code that sends a request that includes that KID?

const checkJwt = jwt({
  // Dynamically provide a signing key based on the kid in the header and the singing 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']
});

I notice in my React client that authentication callbacks go here:

handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
	console.log(authResult);

authResult looks like the following. Can I get a KID from there?

accessToken: "XDXXXXXXXXXWm5qFoOEXXXXXXX"
appState: null
expiresIn: 7200
idToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
idTokenPayload: {…}
at_hash: "fstLPV0Waq8_hOj5WRsJ0g"
aud: "OzBW7g0eW456YgUr5H4pzPCxQzwtmLs7"
exp: 1526028051
iat: 1525992051
iss: "https://xxxxx.auth0.com/"
nonce: "CG-XXXXXXXXXXXXXXXXXXXX"
sub: "auth0|XXXXXXXXXXXXXXXXXX"
__proto__: Object { … }
refreshToken: null
scope: null
state: "XXXXXXXXXXXXXXXXyJiEBKEo_qX0JhSl6m6y6"
tokenType: "Bearer"

Thanks.


#4

Why do you need a kid? Let’s start over: what do you want to accomplish?


#5

This analogy to Facebook login is what I want to accomplish.

I want my client to hand an access token to my server, and then my server verifies that the user is real and is logged into my app.

Thanks.


#6

Did you follow the quickstart I sent you? It does exactly what you’re saying. Authenticates with Auth0, gets an access token and calls an API.


#7

I get stuck on the quickstart you posted. I started with https://github.com/auth0-samples/auth0-react-samples/tree/embedded-login/02-Custom-Login-Form and the audience field in WebAuth is already set to https://${AUTH_CONFIG.domain}/userinfo which I assume has to be that way. How do I now add my own API somewhere so the user in the React app can make calls to the secured API?