feat: add ability to check JWT claims

[ctjlewis]

Description

I wanted to easily protect a route not only for logged-in users, but also for those with a given ROLE JWT claim. I figured I'd send this PR in for review in case this team was interested in merging the changes, or some version of them.

Usage

Example of an unauthorized route request. User with ['USER', 'MODERATOR'] claim trying to access a protected component that is only for ROLE claims that include 'ADMIN':

auth0-react/__tests__/with-authentication-required.test.tsx

Lines 44 to 60 in e13556b

	const WrappedComponent = withAuthenticationRequired(MyComponent, {
	requiredClaims: {
	'https://my.app.io/jwt/claims': {
	ROLE: ['ADMIN'],
	},
	},
	});
	/**
	* A user with USER and MODERATOR roles.
	*/
	const mockUser = {
	name: '__test_user__',
	'https://my.app.io/jwt/claims': {
	USER: '__test_user__',
	ROLE: ['USER', 'MODERATOR'],
	},
	};

Example of an authorized route request, demonstrates claim string -> string[] coercion, such that ROLE: "ADMIN" matches ROLE: ["ADMIN"] etc.

auth0-react/__tests__/with-authentication-required.test.tsx

Lines 108 to 121 in e13556b

	const WrappedComponent1 = withAuthenticationRequired(MyComponent, {
	requiredClaims: {
	'https://my.app.io/jwt/claims': {
	ROLE: 'ADMIN',
	},
	},
	});
	const mockUser1 = {
	name: '__test_user__',
	'https://my.app.io/jwt/claims': {
	USER: '__test_user__',
	ROLE: ['ADMIN'],
	},
	};

Testing

Unit tests were added to ensure that protected routes only showed to users with all specified JWT claims. If requiredClaims in WithAuthenticationRequiredOptions is falsy, the claims check automatically passes.

• This change adds test coverage for new/changed/fixed functionality

Checklist

• I have added documentation for new/changed functionality in this PR or in auth0.com/docs
• All active GitHub checks for tests, formatting, and security are passing
• The correct base branch is being used, if not master

[ctjlewis]

In trying to link this package and use it, I get the following error but can't figure out why (I'm sure it's something simple):

Because this did not involve any changes to package.json, I'm assuming it has to do with a Yarn/NPM conflict on my local machine?

[ctjlewis]

Requesting notes from: @adamjmcgrath (sorry to ping)

[@Vivalldi: So sorry I tagged you, thought you were a code owner 😅]

[adamjmcgrath]

Hi @ctjlewis - thanks for raising this PR, checking claims to access routes would be a great addition to the SDK.

I have a request about the implementation - could you change it to accepting function that returns a boolean to indicate if the claim check passes, eg

Example of an unauthorized route request. User with ['USER', 'MODERATOR'] claim trying to access a protected component that is only for ROLE claims that include 'ADMIN':

const WrappedComponent = withAuthenticationRequired(MyComponent, {
  claimCheck(claims) {
    return claims['https://my.app.io/jwt/claims'].includes('ADMIN')
  }
}); 

(The name claimCheck is consistent with some of our other js APIs)

[adamjmcgrath]

@ctjlewis

In trying to link this package and use it, I get the following error but can't figure out why (I'm sure it's something simple):

It's a pain to link packages that use react hooks - you could try pointing react and react-dom to ../auth0-react/node_modules/react and ../auth0-react/node_modules/react-dom.

Or just try using npm pack and installing the tar file locally

[ctjlewis]

That made the code change much smaller and more straightforward, probably the best approach. Please lmk what you think about the changes.

[adamjmcgrath]

looks good - couple of suggestions

[ctjlewis]

Though this assumes JWT claims will be string | string[], I think it's a good place to start. I would appreciate any help regarding docs or adding support for types outside of strings or arrays of strings.

[adamjmcgrath]

Hi @ctjlewis

If you change the signature of claimCheck to accept a User I'd be happy to proceed with this PR

[ctjlewis]

Please let me know if these changes are sufficient.

[adamjmcgrath]

@ctjlewis - couple of other things

The dependent key for the useEffect should be routeIsAuthenticated not isAuthenticated
And we only want to run the claimCheck function if the user is authenticated.

I've made the changes and put them here for your reference 3a8514d

[ctjlewis]

Thank you very much for your help on this Adam. I merged your suggestions.

[adamjmcgrath]

Hey @ctjlewis

It doesn't look like you implemented the majority of changes I suggested in 3a8514d - could you take another look?

Also - could you revert your changes to with-auth.tsx?

[ctjlewis]

The changes in with-auth0.tsx were just to silence the following tsc error:

'auth0' is specified more than once, so this usage will be overwritten.ts(2783)

[adamjmcgrath]

The changes in with-auth0.tsx were just to silence the following tsc error

Am not seeing that error on the CI server - perhaps you're using a different TS compiler than the project.

[adamjmcgrath]

lgtm - thanks @ctjlewis!