feat(rsc-auth): Implement getRoles function in auth mw & update default ServerAuthState

.changesets/10656.md

@@ -0,0 +1,23 @@
+- feat(rsc-auth): Implement extractRoles function in auth mw & update default ServerAuthState (#10656) by @dac09
+
+- Implement extractRoles function in supabase and dbAuth middleware
+- Updates default serverAuthState to contain roles
+- Make cookieHeader a required attribute
+- Introduces new `clear()` function to remove auth state - just syntax sugar
+
+## Example usage
+```tsx
+// In entry.server.tsx
+export const registerMiddleware = () => {
+  // This actually returns [dbAuthMiddleware, '*']
+  const authMw = initDbAuthMiddleware({
+    dbAuthHandler,
+    getCurrentUser,
+    extractRoles: (decoded) => {
+      return decoded.currentUser.roles || []
+    }
+  })
+
+  return [authMw]
+}
+```

packages/auth-providers/dbAuth/middleware/README.md

@@ -18,9 +18,10 @@ interface Props {
 export const registerMiddleware = () => {
   // This actually returns [dbAuthMiddleware, '*']
   const authMw = initDbAuthMiddleware({
-    cookieName,
     dbAuthHandler,
     getCurrentUser,
+    // cookieName optional
+    // extractRoles optional
     // dbAuthUrl? optional
   })
 

packages/auth-providers/dbAuth/middleware/src/__tests__/initDbAuthMiddleware.test.ts

@@ -8,6 +8,7 @@ import {
   MiddlewareResponse,
 } from '@redwoodjs/vite/middleware'
 
+import { middlewareDefaultAuthProviderState } from '../../../../../auth/dist/AuthProvider/AuthProviderState'
 import type { DbAuthMiddlewareOptions } from '../index'
 import { initDbAuthMiddleware } from '../index'
 const FIXTURE_PATH = path.resolve(
@@ -82,6 +83,7 @@ describe('dbAuthMiddleware', () => {
         return { id: 'mocked-current-user-1', email: 'user-1@example.com' }
       }),
       dbAuthHandler: vi.fn(),
+      extractRoles: vi.fn(() => ['f1driver']),
     }
     const [middleware] = initDbAuthMiddleware(options)
 
@@ -109,6 +111,15 @@ describe('dbAuthMiddleware', () => {
         email: 'user-1@example.com',
         id: 'mocked-current-user-1',
       },
+      roles: ['f1driver'],
+    })
+
+    expect(options.extractRoles).toHaveBeenCalledWith({
+      currentUser: {
+        email: 'user-1@example.com',
+        id: 'mocked-current-user-1',
+      },
+      mockedSession: 'this_is_the_only_correct_session',
     })
 
     // Allow react render, because body is not defined, and status code not redirect
@@ -152,6 +163,8 @@ describe('dbAuthMiddleware', () => {
         email: 'user-1@example.com',
         id: 'mocked-current-user-1',
       },
+      // No extract roles function, so it should be empty
+      roles: [],
     })
 
     // Allow react render, because body is not defined, and status code not redirect
@@ -500,6 +513,12 @@ describe('dbAuthMiddleware', () => {
   })
 
   describe('handle exception cases', async () => {
+    const unauthenticatedServerAuthState = {
+      ...middlewareDefaultAuthProviderState,
+      cookieHeader: null,
+      roles: [],
+    }
+
     beforeAll(() => {
       // So that we don't see errors in console when running negative cases
       vi.spyOn(console, 'error').mockImplementation(() => {})
@@ -578,7 +597,11 @@ describe('dbAuthMiddleware', () => {
       expect(res).toBeDefined()
 
       const serverAuthState = mwReq.serverAuthState.get()
-      expect(serverAuthState).toBeNull()
+      expect(serverAuthState).toEqual({
+        ...unauthenticatedServerAuthState,
+        cookieHeader:
+          'session_8911=some-bad-encrypted-cookie;auth-provider=dbAuth',
+      })
 
       expect(res?.toResponse().headers.getSetCookie()).toEqual([
         // Expired cookies, will be removed by browser

packages/auth-providers/dbAuth/middleware/src/index.ts

@@ -18,12 +18,14 @@ export interface DbAuthMiddlewareOptions {
     req: Request | APIGatewayProxyEvent,
     context?: Context,
   ) => DbAuthResponse
+  extractRoles?: (decoded: any) => string[]
   getCurrentUser: GetCurrentUser
 }
 
 export const initDbAuthMiddleware = ({
   dbAuthHandler,
   getCurrentUser,
+  extractRoles,
   cookieName,
   dbAuthUrl = '/middleware/dbauth',
 }: DbAuthMiddlewareOptions): [Middleware, '*'] => {
@@ -71,7 +73,7 @@ export const initDbAuthMiddleware = ({
     try {
       // Call the dbAuth auth decoder. For dbAuth we have direct access to the `dbAuthSession` function.
       // Other providers will be slightly different.
-      const { currentUser } = await validateSession({
+      const { currentUser, decryptedSession } = await validateSession({
         req,
         cookieName,
         getCurrentUser,
@@ -84,11 +86,12 @@ export const initDbAuthMiddleware = ({
         hasError: false,
         userMetadata: currentUser, // dbAuth doesn't have userMetadata
         cookieHeader,
+        roles: extractRoles ? extractRoles(decryptedSession) : [],
       })
     } catch (e) {
       // Clear server auth context
       console.error('Error decrypting dbAuth cookie \n', e)
-      req.serverAuthState.set(null)
+      req.serverAuthState.clear()
 
       // Note we have to use ".unset" and not ".clear"
       // because we want to remove these cookies from the browser

packages/auth-providers/supabase/middleware/src/__tests__/createSupabaseAuthMiddleware.test.ts

@@ -5,6 +5,7 @@
 
 import {
   middlewareDefaultAuthProviderState,
+  unauthenticatedServerAuthState,
   // type ServerAuthState,
 } from '@redwoodjs/auth'
 import { authDecoder } from '@redwoodjs/auth-supabase-api'
@@ -33,8 +34,6 @@
   }
 })
 
-// })
-
 vi.mock('@redwoodjs/auth-supabase-api', () => {
   return {
     authDecoder: vi.fn(() => {
@@ -74,6 +73,12 @@
 }
 
 describe('createSupabaseAuthMiddleware()', () => {
+  const unauthenticatedServerAuthState = {
+    ...middlewareDefaultAuthProviderState,
+    roles: [],
+    cookieHeader: null,
+  }
+
   it('creates middleware for Supabase SSR auth', async () => {
     const middleware = createSupabaseAuthMiddleware(options)
     const request = new Request('http://localhost:8911', {
@@ -90,7 +95,7 @@
     expect(result).toHaveProperty('status', 200)
 
     const serverAuthState = req.serverAuthState.get()
-    expect(serverAuthState).toEqual(middlewareDefaultAuthProviderState)
+    expect(serverAuthState).toEqual(unauthenticatedServerAuthState)
   })
 
   it('passes through non-authenticated requests', async () => {
@@ -107,7 +112,7 @@
     expect(result.body).toEqual('original response body')
 
     const serverAuthState = req.serverAuthState.get()
-    expect(serverAuthState).toEqual(middlewareDefaultAuthProviderState)
+    expect(serverAuthState).toEqual(unauthenticatedServerAuthState)
   })
   it('passes through when no auth-provider cookie', async () => {
     const middleware = createSupabaseAuthMiddleware(options)
@@ -127,7 +132,10 @@
     expect(result.body).toEqual('original response body when no auth provider')
 
     const serverAuthState = req.serverAuthState.get()
-    expect(serverAuthState).toEqual(middlewareDefaultAuthProviderState)
+    expect(serverAuthState).toEqual({
+      ...unauthenticatedServerAuthState,
+      cookieHeader: 'missing-the-auth-provider-cookie-header-name=supabase',
+    })
   })
 
   it('passes through when unsupported auth-provider', async () => {
@@ -147,7 +155,10 @@
       'original response body for unsupported provider',
     )
     const serverAuthState = req.serverAuthState.get()
-    expect(serverAuthState).toEqual(middlewareDefaultAuthProviderState)
+    expect(serverAuthState).toEqual({
+      ...unauthenticatedServerAuthState,
+      cookieHeader: 'auth-provider=unsupported',
+    })
   })
 
   it('handles current user GETs', async () => {
@@ -171,7 +182,10 @@
 
     expect(req.url).toContain('/middleware/supabase/currentUser')
     const serverAuthState = req.serverAuthState.get()
-    expect(serverAuthState).toEqual(middlewareDefaultAuthProviderState)
+    expect(serverAuthState).toEqual({
+      ...unauthenticatedServerAuthState,
+      cookieHeader: 'auth-provider=supabase',
+    })
   })
 
   it('authenticated request sets currentUser', async () => {
@@ -199,6 +213,52 @@
     })
   })
 
+  it('authenticated request sets userMetadata', async () => {
+    const optionsWithExtractRole: SupabaseAuthMiddlewareOptions = {
+      getCurrentUser: async () => {
+        return {
+          id: 1,
+          email: 'user-1@example.com',
+          user_metadata: { favoriteColor: 'yellow' },
+        }
+      },
+      extractRoles: vi.fn().mockReturnValue(['admin', 'editor']),
+    }
+
+    const middleware = createSupabaseAuthMiddleware(optionsWithExtractRole)
+    const request = new Request('http://localhost:8911/authenticated-request', {
+      method: 'GET',
+      headers: new Headers({
+        cookie: 'auth-provider=supabase;sb_access_token=dummy_access_token',
+      }),
+    })
+    const req = new MiddlewareRequest(request)
+
+    const result = await middleware(req, MiddlewareResponse.next())
+    expect(result).toBeDefined()
+    expect(req).toBeDefined()
+
+    expect(authDecoder).toHaveBeenCalledWith(
+      'auth-provider=supabase;sb_access_token=dummy_access_token',
+      'supabase',
+      expect.anything(),
+    )
+
+    const serverAuthState = req.serverAuthState.get()
+    expect(serverAuthState).toBeDefined()
+    expect(serverAuthState).toHaveProperty('currentUser')
+    expect(serverAuthState.isAuthenticated).toEqual(true)
+    expect(serverAuthState.userMetadata).toEqual({
+      favoriteColor: 'yellow',
+    })
+    expect(serverAuthState.roles).toEqual(['admin', 'editor'])
+
+    // Called with result of decoding the token
+    expect(optionsWithExtractRole.extractRoles).toHaveBeenCalledWith({
+      sub: 'abc123',
+    })
+  })
+
   it('authenticated request sets userMetadata', async () => {
     const optionsWithUserMetadata: SupabaseAuthMiddlewareOptions = {
       getCurrentUser: async () => {
@@ -268,7 +328,11 @@
     // when an exception is thrown, such as when tampering with the cookie,
     //the serverAuthState should be cleared
     const serverAuthState = req.serverAuthState.get()
-    expect(serverAuthState).toBeNull()
+    expect(serverAuthState).toEqual({
+      ...unauthenticatedServerAuthState,
+      cookieHeader:
+        'auth-provider=supabase;sb-example-auth-token=dummy_access_token',
+    })
 
     // the auth-provider cookie should be cleared from the response
     const authProviderCookie = res.cookies.get('auth-provider')

packages/auth-providers/supabase/middleware/src/index.ts

@@ -10,13 +10,15 @@ import { clearAuthState } from './util'
 
 export interface SupabaseAuthMiddlewareOptions {
   getCurrentUser: GetCurrentUser
+  extractRoles?: (decoded: any) => string[]
 }
 
 /**
  * Create Supabase Auth Middleware that sets the `serverAuthState` based on the Supabase cookie.
  */
 const createSupabaseAuthMiddleware = ({
   getCurrentUser,
+  extractRoles,
 }: SupabaseAuthMiddlewareOptions) => {
   return async (req: MiddlewareRequest, res: MiddlewareResponse) => {
     const type = 'supabase'
@@ -68,6 +70,8 @@ const createSupabaseAuthMiddleware = ({
         isAuthenticated: !!currentUser,
         hasError: false,
         userMetadata: userMetadata || currentUser,
+        cookieHeader,
+        roles: extractRoles ? extractRoles(decoded) : [],
       })
     } catch (e) {
       console.error(e, 'Error in Supabase Auth Middleware')

packages/auth-providers/supabase/middleware/src/util.ts

@@ -61,7 +61,7 @@ export const clearAuthState = (
   res: MiddlewareResponse,
 ) => {
   // Clear server auth context
-  req.serverAuthState.set(null)
+  req.serverAuthState.clear()
 
   // clear supabase cookies
   // We can't call .signOut() because that revokes all refresh tokens,

packages/auth/src/AuthProvider/ServerAuthProvider.tsx

@@ -4,8 +4,11 @@ import React from 'react'
 import type { AuthProviderState } from './AuthProviderState.js'
 import { middlewareDefaultAuthProviderState } from './AuthProviderState.js'
 
-export type ServerAuthState = AuthProviderState<never> & {
-  cookieHeader?: string
+export type ServerAuthState = AuthProviderState<any> & {
+  // Intentionally making these keys non-optional (even if nullable) to make sure
+  // they are set correctly in middleware
+  cookieHeader: string | null | undefined
+  roles: string[]
 }
 
 const getAuthInitialStateFromServer = () => {
@@ -45,9 +48,6 @@ export const ServerAuthProvider = ({
   value: ServerAuthState
   children?: ReactNode[]
 }) => {
-  // @NOTE: we "Sanitize" to remove cookieHeader
-  // not totally necessary, but it's nice to not have them in the DOM
-  // @MARK: needs discussion!
   const stringifiedAuthState = `__REDWOOD__SERVER__AUTH_STATE__ = ${JSON.stringify(
     sanitizeServerAuthState(value),
   )};`
@@ -67,6 +67,7 @@ export const ServerAuthProvider = ({
     </>
   )
 }
+
 function sanitizeServerAuthState(value: ServerAuthState) {
   const sanitizedState = { ...value }
   // Remove the cookie from being printed onto the DOM

packages/graphql-server/src/types.ts

@@ -58,7 +58,7 @@ export type GetCurrentUser = (
   decoded: AuthContextPayload[0],
   raw: AuthContextPayload[1],
   req?: AuthContextPayload[2],
-) => Promise<null | Record<string, unknown> | string>
+) => Promise<null | Record<string, unknown>>
 
 export type GenerateGraphiQLHeader = () => string