getCurrentUser given both decoded & access tokens #779

dthyresson · 2020-06-30T17:37:10Z

Overview and Why

When implementing a custom getCurrentUser() in a Redwood app's auth.js, there's a need to access not just the decoded JWT, but the access token itself.

This is especially helpful when implementing authentication with Auth0 because an access token (https://auth0.com/docs/tokens/concepts/access-tokens) is required by Auth0 in order to fetch the userProfile from the /userinfo endpoint (https://auth0.com/docs/api/authentication#get-user-info).

One may then persist the profile information (such as email) in a User or update the currentUser in the context to present email, name, or other profile info subsequently on the web side.

Changes Made

This PR makes the following changes:

In api/src/auth/authHeaders.ts, moves parsing the access token from the event headers (ie, the "Bearer ") into its own function to be used both independently and also when decoding the token. This is used when creating the context handler in api/src/functions/graphql.ts.

export const accessToken = async (event: {
  event: APIGatewayProxyEvent
}): Promise<AccessToken> => {
  let accessToken: AccessToken = null

  accessToken = event.headers?.authorization?.split(' ')?.[1]

  if (!accessToken && accessToken.length === 0) {
    throw new Error('Empty authorization token')
  }

  return accessToken
}

In api/src/functions/graphql.ts, the createContextHandler now provides decoded token as well as optional authType and access token to getCurrentUser().

// Get the authorization information from the request headers and request context.
    const type = getAuthProviderType(event)
    if (typeof type !== 'undefined') {
      const decoded = await decodeAuthToken({ type, event, context })
      const token = await accessToken(event)
      context.currentUser =
        typeof getCurrentUser == 'function'
          ? await getCurrentUser(decoded, {
              token,
              authType: type,
            })
          : decoded
    }

Example Use

The following is an example of how having the access token is helpful when using Auth0 as an authentication provider.

Install "auth0" package via yarn workspace api add auth0
The decoded token provides the user's id in the JWT's sub (aka subject) claim.
The token is the access token required by Auth0 to call the /userinfo endpoint
Use the sub claim to see if a User exists in the db; if not ...
Fetch userProfile from Auth0
Create new User
Update the currentUser in context so that a db call to find the User is not made upon each request

// api/src/lib/auth.js

import { AuthenticationClient } from 'auth0'

...

const auth0 = new AuthenticationClient({
  domain: process.env.AUTH0_DOMAIN,
  clientId: process.env.AUTH0_CLIENT_ID,
})

export const getCurrentUser = async (decoded, { token, authType }) => {
  // shortcut if we have a user profile in context
  // note: if something else changes the User record
  // can't rely on this shortcut but will reduce db calls
  if (context.currentUser?.userId) {
    return context.currentUser
  }

  // do we have an accessToken from auth0 and an userId from the decoded JWT?
  if (!token || authType != 'auth0' || !decoded?.sub) {
    return decoded
  }

  // find the existing User ...
  // or create a new User with its userProfile info
  try {
    const user = await db.user.findOne({
      where: {
        userId: decoded.sub,
      },
    })

    if (!user && token) {
      const auth0User = await auth0.getProfile(token)
      const userProfile = {
        email: auth0User.email,
        emailVerified: auth0User.emailVerified,
        lastIp: auth0User.lastIp,
        lastLogin: auth0User.lastLogin,
        loginsCount: auth0User.loginsCount,
        name: auth0User.name,
        nickname: auth0User.nickname,
        picture: auth0User.picture,
        userId: auth0User.sub,
      }

      const userWithProfile = await db.user.create({
        data: userProfile,
      })

      // set the currentUser in context to include its userProfile info
      const currentUser = context.currentUser
      context.currentUser = { currentUser, ...userProfile }

      return userWithProfile
    }

    return user
  } catch (error) {
    console.log(error)
    return decoded
  }
}

Now in a page (or better yet, a User component) one can present the user profile:

  const { currentUser, isAuthenticated } = useAuth()

...

{isAuthenticated && currentUser && (
  <div>
   <p>You need to be logged in to see your profile:</p>
   <p>{currentUser.email}</p>
   <img src={currentUser.picture} />
   <p>{currentUser.email}</p>
  </div>
)}

Considerations

{ token, authType } should be optional so as to not break existing getCurrentUser() implementations?
authHeaders did not have tests, so testcases not updated (but happy to write some)

packages/api/src/auth/authHeaders.ts

dthyresson · 2020-06-30T20:24:07Z

I also just realized that if this gets merged, the generated auth.js template -- see: https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/generate/auth/templates -- should be updated for the new getCurrentUser = async (decoded, { token, authType }) signature.

https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/generate/auth/templates

packages/cli/src/commands/generate/auth/templates/firebase.auth.js.template

peterp · 2020-07-01T07:10:44Z

This is great, thanks for this @dthyresson !

peterp

Hey!

I've left some feedback, this is starting to look really good - let me know if there are things that aren't clear and I'll be happy to jump on a call to clarify them.

packages/api/src/auth/accessToken.ts

packages/api/src/functions/graphql.ts

packages/api/src/auth/authDecoders/goTrue.ts

packages/api/src/auth/authDecoders/magicLink.ts

dthyresson · 2020-07-03T11:50:28Z

Hey!

I've left some feedback, this is starting to look really good - let me know if there are things that aren't clear and I'll be happy to jump on a call to clarify them.

Thanks @peterp appreciate that! Starting to get a feel for how you and the project are designing and implementing the framework -- it has to be designed for extensibility from the start (well from an early iteration) when solving a problem... not just solving the problem if you know what I mean.

I think I have a handle on your suggestions but will reach out otherwise.

packages/api/src/auth/authHeaders.ts

peterp

This is looking great, I just want a few stylistic changes - Feel free to merge them in batches, or by yourself. After that I'll run it locally and merge it.

I might change a few things post deployment - but over all it's way better than it was before, thanks for much for this!

packages/api/src/auth/authDecoders/auth0.ts

packages/api/src/auth/authHeaders.ts

packages/api/src/functions/graphql.ts

dthyresson · 2020-07-07T12:35:15Z

@peterp All request style changes are in. Thanks for noting them -- I'll remember for future.

After that I'll run it locally and merge it.

Thanks.

I might change a few things post deployment -

I could see revisiting some naming: auth vs authentication vs authorization. Client vs Provider. Decoder vs Authorization. Decoded vs token vs "bearer token in header".

I imagine when roles and permissions are added, these terms might get more used and possible source of confusion.

but over all it's way better than it was before, thanks for much for this!

Glad to help.

dthyresson · 2020-07-07T18:30:08Z

@peter one last item -- but this could be a separate issue/task is to update the auth generators/templates:

https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/generate/auth/templates

export const getCurrentUser = async (jwt) => {
  return jwt
}

to use new

export const getCurrentUser = async (decoded, { authType, token }) => {

and even add a new Auth0 template that has an example of fetching the full userProfile from API

import { AuthenticationClient } from 'auth0'
...

const auth0 = new AuthenticationClient({
  domain: process.env.AUTH0_DOMAIN,
  clientId: process.env.AUTH0_CLIENT_ID,
})

...

export const getCurrentUser = async (decoded, { authType, token }) => {

...

  // find the existing User ...
  // or create a new User with its userProfile info
  try {
    const user = await db.user.findOne({
      where: {
        userId: decoded.sub,
      },
    })

    if (!user && token) {
      const auth0User = await auth0.getProfile(token)
      const userProfile = {
        email: auth0User.email,
        emailVerified: auth0User.emailVerified,
        lastIp: auth0User.lastIp,
        lastLogin: auth0User.lastLogin,
        loginsCount: auth0User.loginsCount,
        name: auth0User.name,
        nickname: auth0User.nickname,
        picture: auth0User.picture,
        userId: auth0User.sub,
      }

...

dthyresson · 2020-07-07T23:23:11Z

packages/cli/src/commands/generate/auth/auth.js

@@ -147,7 +147,7 @@ export const handler = async ({ provider, force }) => {
  const tasks = new Listr(
    [
      {
-        title: 'Adding required packages...',
+        title: 'Adding required web packages...',


Now can add packages to either the web or api side, since Auth0's api side benefits from having the its AuthenticationClient to implement the getCurrentUser.

@peterp ok with ☝️ to add both web/api packages?

packages/cli/src/commands/generate/auth/providers/auth0.js

dthyresson · 2020-07-07T23:24:27Z

packages/cli/src/commands/generate/auth/templates/auth0.auth.js.template

@@ -0,0 +1,101 @@
+// Define what you want `currentUser` to return throughout your app.


This may be way too much but included as an example of how to fetch userProfile now that have the access token.

Also, I had problems testing my changes to the cli.

While I built the cli package via yarn build:js && yarn build:clean-dist and I see the new/updated files:

and when I do a

yarn rwt copy ../../redwoodjs/redwood

from there and I see the files move

when i try to test with a

yarn rw g auth auth0

the files in dist seem to revert to the old files and I get a file not found error for the new auth0 template

✔ Adding required web packages... ✔ Adding required api packages... ✔ Installing packages... ✖ Generating auth lib... → ENOENT: no such file or directory, open '<MYDIRPATH>/projects/redwoodjs/auth0-auth-test-app … Adding auth config to web... Adding auth config to GraphQL API... One more thing... ENOENT: no such file or directory, open <MYDIRPATH>/projects/redwoodjs/auth0-auth-test-app/node_modules/@redwoodjs/cli/dist/commands/generate/auth/templates/auth0.auth.js.template'

So, unfortunately these template changes haven't been tested with a new rw app. Sorry. I'll keep trying to figure out why the files revert.

Strange, I'm having the same issue

packages/cli/src/commands/generate/auth/providers/auth0.js

peterp · 2020-07-09T13:00:01Z

TODO

Test that authentication still works.
Update docs.

packages/cli/src/commands/generate/auth/templates/firebase.auth.js.template

…h.js.template

jtoar added the topic/auth label Jun 30, 2020

dthyresson commented Jun 30, 2020

View reviewed changes

packages/api/src/auth/authHeaders.ts Outdated Show resolved Hide resolved

dthyresson commented Jun 30, 2020

View reviewed changes

packages/cli/src/commands/generate/auth/templates/firebase.auth.js.template Outdated Show resolved Hide resolved

peterp self-assigned this Jul 1, 2020

dthyresson added 4 commits July 2, 2020 09:12

getCurrentUser given both decoded & access tokens

042cd8e

Corrects default case in decodeAuthToken

5b6a638

Adds params to generated auth.js getCurrentUser

8d71532

Refactor w/ AuthDecoder interface to decode token

2affd4d

dthyresson force-pushed the dt-auth-access-token branch from be1afec to 2affd4d Compare July 3, 2020 00:17

Netlify & GoTrue decoders missing NewClientContext

e337806

peterp requested changes Jul 3, 2020

View reviewed changes

dthyresson added 3 commits July 3, 2020 09:04

Changes requested for AuthorizationHeader plus ++

5a98b7d

Implemented getAuthenticationContext

171852b

Get to green w/ fixed getAuthenticationContext

0b6acac

dthyresson commented Jul 6, 2020

View reviewed changes

packages/api/src/auth/authHeaders.ts Outdated Show resolved Hide resolved

Clean up getAuthenticationContext fall through

64b48b9

peterp self-requested a review July 6, 2020 15:31

peterp requested changes Jul 7, 2020

View reviewed changes

Implemented code style changes per PR review.

e7ac26c

Updates cli generate auth for new currentUser

e88cc88

dthyresson commented Jul 7, 2020

View reviewed changes

packages/cli/src/commands/generate/auth/providers/auth0.js Outdated Show resolved Hide resolved

dthyresson commented Jul 7, 2020

View reviewed changes

Restores redirect_uri on auth0 provider generator

13f21de

dthyresson commented Jul 8, 2020

View reviewed changes

packages/cli/src/commands/generate/auth/providers/auth0.js Show resolved Hide resolved

peterp self-requested a review July 8, 2020 10:23

Refactor auth implementation.

bb1e5b5

peterp reviewed Jul 9, 2020

View reviewed changes

packages/cli/src/commands/generate/auth/providers/auth0.js Outdated Show resolved Hide resolved

peterp added 7 commits July 9, 2020 15:16

Added warning about auth0 localstorage.

2be2b47

Resolve graphql path.

ff23e33

Reorder auth generator steps.

14bb24f

Do not install auth0 package by default.

bc56397

Revert template modifications.

7934823

Fix AuthContextPayload.

b078051

Update docs.

af4827c

peterp self-requested a review July 9, 2020 15:46

peterp reviewed Jul 9, 2020

View reviewed changes

packages/cli/src/commands/generate/auth/templates/firebase.auth.js.template Outdated Show resolved Hide resolved

Update packages/cli/src/commands/generate/auth/templates/firebase.aut…

2caf290

…h.js.template

peterp approved these changes Jul 9, 2020

View reviewed changes

peterp added the next release label Jul 9, 2020

Merge branch 'main' into dt-auth-access-token

c519405

peterp merged commit 7b0fb8f into redwoodjs:main Jul 9, 2020

peterp deleted the dt-auth-access-token branch July 9, 2020 16:35

peterp added this to the next release milestone Jul 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getCurrentUser given both decoded & access tokens #779

getCurrentUser given both decoded & access tokens #779

dthyresson commented Jun 30, 2020

dthyresson commented Jun 30, 2020

peterp commented Jul 1, 2020

peterp left a comment

dthyresson commented Jul 3, 2020

peterp left a comment

dthyresson commented Jul 7, 2020

dthyresson commented Jul 7, 2020

dthyresson Jul 7, 2020

dthyresson Jul 8, 2020

dthyresson Jul 7, 2020

dthyresson Jul 7, 2020

peterp Jul 9, 2020

peterp commented Jul 9, 2020 •

edited

Loading

		@@ -0,0 +1,101 @@
		// Define what you want `currentUser` to return throughout your app.

getCurrentUser given both decoded & access tokens #779

getCurrentUser given both decoded & access tokens #779

Conversation

dthyresson commented Jun 30, 2020

Overview and Why

Changes Made

Example Use

Considerations

dthyresson commented Jun 30, 2020

peterp commented Jul 1, 2020

peterp left a comment

Choose a reason for hiding this comment

dthyresson commented Jul 3, 2020

peterp left a comment

Choose a reason for hiding this comment

dthyresson commented Jul 7, 2020

dthyresson commented Jul 7, 2020

dthyresson Jul 7, 2020

Choose a reason for hiding this comment

dthyresson Jul 8, 2020

Choose a reason for hiding this comment

dthyresson Jul 7, 2020

Choose a reason for hiding this comment

dthyresson Jul 7, 2020

Choose a reason for hiding this comment

peterp Jul 9, 2020

Choose a reason for hiding this comment

peterp commented Jul 9, 2020 • edited Loading

TODO

peterp commented Jul 9, 2020 •

edited

Loading