Saturday 6 May 2017

Having trouble with my node-Api validating my react client-side jwt-token

I've just started using Auth0 and its really cool, but im running into some issues.

My main issue is that I have a react client-side app that is saving the jwt token on user login - which is great. However when I try to fetch data from my separate Node API - the route that is supposed to validate the token is giving me errors.

If I have my node api using this first type of authentication, I get an error: UnauthorizedError: secret or public key must be provided

const checkJwt = jwt({
  secret: jwksRsa.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: "https://smbtodos.auth0.com/.well-known/jwks.json"
    }),
    audience: 'https://localhost:3001/api/jokes/celebrity',
    issuer: "https://smbtodos.auth0.com/",
    algorithms: ['RS256']
});

BUT, if I use this second form of validation, it seems to work. My concern is that Im not 100% sure its as secure. If there is no token - this validation give me this error when the token is not valid: UnauthorizedError: jwt malformed

const authCheck = jwt({
  secret: 'my-secret',
  // If your Auth0 client was created before Dec 6, 2016,
  // uncomment the line below and remove the line above
  // secret: new Buffer('AUTH0_SECRET', 'base64'),
  audience: 'my-domain'
});

Here is my lock file on react:

import { setSecret } from './auth'

import uuid from 'uuid'

const getLock = (options) => {
  const config = require('../config.json')
  const Auth0Lock = require('auth0-lock').default
  return new Auth0Lock(config.AUTH0_CLIENT_ID, config.AUTH0_CLIENT_DOMAIN, options)
}

const getBaseUrl = () => `${window.location.protocol}//${window.location.host}`

const getOptions = (container) => {

  return {
    allowedConnections: ['Username-Password-Authentication'],
    container,
    closable: false,
    auth: {
      responseType: 'token id_token',
      domain: 'smbtodos.auth0.com',
      redirectUrl: `${getBaseUrl()}/auth/signed-in`,
      params: {
      scope: 'openid profile email'
      }
    }
  }
}

export const show = (container) => getLock(getOptions(container)).show()
export const logout = () => getLock().logout({ returnTo: getBaseUrl() })

And here is my api call in react:

static getJokes(access){
        console.log(access.token)
        return new Promise((resolve, reject) => {

            fetch('http://localhost:3001/api/jokes/celebrity', {
                    method: 'GET',
                    headers: { 
                         Authorization: `Bearer ${access.token}`,
                    } 
                })
                .then( r => {
                    const result = r.json()
                    return result
                } )
                .then( res => {
                    resolve({jokes: res})
                    console.log('api resp 200');
                })
                .catch(e => {
                    reject(e)
                    // console.log(e)
                })

        });

    }
} 

So do I need to make the first option work for better security, if so how? Is the second option of api validation just as good? I feel like I've looked at over 100 tutorials over the last 2 days and they are either out of day, or just are not easy to follow. Im using the most current version of Auth0.

Looking for any help - thank you.



via Spencer Bigum

No comments:

Post a Comment