Page authenticate role (#3902)

.changeset/red-gorillas-marry.md

@@ -0,0 +1,6 @@
+---
+"@blitzjs/auth": patch
+"@blitzjs/next": patch
+---
+
+Added option `role` to `authenticate` property of `BlitzPage` to authenticate page with respect to the role of the user. `String` value or `Array` of strings can be passed to authorize users.

packages/blitz-auth/src/client/auth-client.test.ts

@@ -98,7 +98,7 @@ describe("publicDataStore", () => {
         ret = data
       })
       getPublicDataStore().clear()
-      expect(ret).toEqual({userId: null})
+      expect(ret).toEqual({userId: null, role: null})
     })
   })
 
@@ -107,7 +107,7 @@ describe("publicDataStore", () => {
       it("returns empty data if cookie is falsy", () => {
         const ret = getPublicDataStore().getData()
 
-        expect(ret).toEqual({userId: null})
+        expect(ret).toEqual({userId: null, role: null})
       })
     })
   })
@@ -118,6 +118,7 @@ describe("useSession", () => {
     const {result} = renderHook(() => useSession())
 
     expect(result.current).toEqual({
+      role: null,
       isLoading: false,
       userId: null,
     })

packages/blitz-auth/src/client/index.tsx

@@ -50,7 +50,7 @@ export const parsePublicDataToken = (token: string) => {
   }
 }
 
-const emptyPublicData: EmptyPublicData = {userId: null}
+const emptyPublicData: EmptyPublicData = {userId: null, role: null}
 
 class PublicDataStore {
   private eventKey = `${LOCALSTORAGE_PREFIX}publicDataUpdated`
@@ -171,9 +171,8 @@ export const useSession = (options: UseSessionOptions = {}): ClientSession => {
   return session
 }
 
-export const useAuthorizeIf = (condition?: boolean) => {
+export const useAuthorizeIf = (condition?: boolean, role?: string | Array<string>) => {
   const [mounted, setMounted] = useState(false)
-
   useEffect(() => {
     setMounted(true)
   }, [])
@@ -183,6 +182,29 @@ export const useAuthorizeIf = (condition?: boolean) => {
     error.stack = null!
     throw error
   }
+
+  if (isClient && condition && role && getPublicDataStore().getData().userId && mounted) {
+    const error = new AuthenticationError()
+    error.stack = null!
+    if (!authorizeRole(role, getPublicDataStore().getData().role as string)) {
+      throw error
+    }
+  }
+}
+
+const authorizeRole = (role?: string | Array<string>, currentRole?: string) => {
+  if (role && currentRole) {
+    if (Array.isArray(role)) {
+      if (role.includes(currentRole)) {
+        return true
+      }
+    } else {
+      if (currentRole === role) {
+        return true
+      }
+    }
+  }
+  return false
 }
 
 export const useAuthorize = () => {
@@ -224,7 +246,7 @@ export type RedirectAuthenticatedToFn = (
 
 export type BlitzPage<P = {}> = React.ComponentType<P> & {
   getLayout?: (component: JSX.Element) => JSX.Element
-  authenticate?: boolean | {redirectTo?: string | RouteUrlObject}
+  authenticate?: boolean | {redirectTo?: string | RouteUrlObject; role?: string | Array<string>}
   suppressFirstRenderFlicker?: boolean
   redirectAuthenticatedTo?: RedirectAuthenticatedTo | RedirectAuthenticatedToFn
 }
@@ -275,7 +297,10 @@ function withBlitzAuthPlugin<TProps = any>(Page: ComponentType<TProps> | BlitzPa
 
     let {authenticate, redirectAuthenticatedTo} = getAuthValues(Page, props)
 
-    useAuthorizeIf(authenticate === true)
+    useAuthorizeIf(
+      authenticate === true,
+      !authenticate ? undefined : typeof authenticate === "object" ? authenticate.role : undefined,
+    )
 
     if (typeof window !== "undefined") {
       const publicData = getPublicDataStore().getData()
@@ -304,6 +329,25 @@ function withBlitzAuthPlugin<TProps = any>(Page: ComponentType<TProps> | BlitzPa
             throw error
           }
         }
+
+        if (
+          authenticate &&
+          typeof authenticate === "object" &&
+          authenticate.redirectTo &&
+          authenticate.role &&
+          !authorizeRole(authenticate.role, publicData.role as string)
+        ) {
+          let {redirectTo} = authenticate
+          if (typeof redirectTo !== "string") {
+            redirectTo = formatWithValidation(redirectTo)
+          }
+          const url = new URL(redirectTo, window.location.href)
+          url.searchParams.append("next", window.location.pathname)
+          debug("[BlitzAuthInnerRoot] redirecting to", url.toString())
+          const error = new RedirectError(url.toString())
+          error.stack = null!
+          throw error
+        }
       } else {
         debug("[BlitzAuthInnerRoot] logged out")
         if (authenticate && typeof authenticate === "object" && authenticate.redirectTo) {

packages/blitz-auth/src/shared/types.ts

@@ -7,10 +7,11 @@ export interface Session {
 
 export type PublicData = Session extends {PublicData: unknown}
   ? Session["PublicData"]
-  : {userId: unknown}
+  : {userId: unknown; role?: unknown}
 
 export interface EmptyPublicData extends Partial<Omit<PublicData, "userId">> {
   userId: PublicData["userId"] | null
+  role?: PublicData["role"] | null
 }
 
 export interface ClientSession extends EmptyPublicData {

packages/blitz-next/src/index-browser.tsx

@@ -73,7 +73,7 @@ type RedirectAuthenticatedToFnCtx = {
 type RedirectAuthenticatedToFn = (args: RedirectAuthenticatedToFnCtx) => RedirectAuthenticatedTo
 export type BlitzPage<P = {}> = React.ComponentType<P> & {
   getLayout?: (component: JSX.Element) => JSX.Element
-  authenticate?: boolean | {redirectTo?: string | RouteUrlObject}
+  authenticate?: boolean | {redirectTo?: string | RouteUrlObject; role?: string | Array<string>}
   suppressFirstRenderFlicker?: boolean
   redirectAuthenticatedTo?: RedirectAuthenticatedTo | RedirectAuthenticatedToFn
 }