Authenticate does not work with roles (blitz-js#4225)

* fix logic to test the role

* add tests

* pnpm lock

* Create afraid-ligers-build.md

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.changeset/afraid-ligers-build.md

@@ -0,0 +1,6 @@
+---
+"@blitzjs/auth": patch
+"blitz": patch
+---
+
+Fix bug that did not allow `Page.authenicate = {role: "" }` to correctly work

integration-tests/auth-with-rpc/src/pages/page-dot-authenticate-role-working.tsx

@@ -0,0 +1,37 @@
+import {useMutation, useQuery} from "@blitzjs/rpc"
+import {BlitzPage} from "@blitzjs/next"
+import logout from "../mutations/logout"
+import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
+import {Suspense} from "react"
+
+function Content() {
+  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [logoutMutation] = useMutation(logout)
+  return (
+    <div>
+      <div id="content">{result}</div>
+      <button
+        id="logout"
+        onClick={async () => {
+          await logoutMutation()
+        }}
+      >
+        logout
+      </button>
+    </div>
+  )
+}
+
+const Authenticate: BlitzPage = () => {
+  return (
+    <div id="page">
+      <Suspense fallback={"Loading..."}>
+        <Content />
+      </Suspense>
+    </div>
+  )
+}
+
+Authenticate.authenticate = {role: "new role"}
+
+export default Authenticate

integration-tests/auth-with-rpc/src/pages/page-dot-authenticate-role.tsx

@@ -0,0 +1,37 @@
+import {useMutation, useQuery} from "@blitzjs/rpc"
+import {BlitzPage} from "@blitzjs/next"
+import logout from "../mutations/logout"
+import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
+import {Suspense} from "react"
+
+function Content() {
+  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [logoutMutation] = useMutation(logout)
+  return (
+    <div>
+      <div id="content">{result}</div>
+      <button
+        id="logout"
+        onClick={async () => {
+          await logoutMutation()
+        }}
+      >
+        logout
+      </button>
+    </div>
+  )
+}
+
+const Authenticate: BlitzPage = () => {
+  return (
+    <div id="page">
+      <Suspense fallback={"Loading..."}>
+        <Content />
+      </Suspense>
+    </div>
+  )
+}
+
+Authenticate.authenticate = {role: "ADMIN"}
+
+export default Authenticate

integration-tests/auth-with-rpc/test/index.test.ts

@@ -47,6 +47,14 @@ const runTests = () => {
         if (browser) await browser.close()
       })
 
+      it("Page.authenticate = {role} should work ", async () => {
+        const browser = await webdriver(appPort, "/page-dot-authenticate-role")
+        await browser.waitForElementByCss("#error")
+        let text = await browser.elementByCss("#error").text()
+        expect(text).toMatch(/AuthenticationError/)
+        if (browser) await browser.close()
+      })
+
       it("should render error for protected layout", async () => {
         const browser = await webdriver(appPort, "/layout-authenticate")
         await browser.waitForElementByCss("#error")
@@ -105,6 +113,30 @@ const runTests = () => {
         if (browser) await browser.close()
       })
 
+      it("Page.authenticate = {role} should work ", async () => {
+        let browser = await webdriver(appPort, "/login")
+        await waitFor(200)
+        await browser.elementByCss("#login").click()
+        await waitFor(200)
+        await browser.eval(`window.location = "/page-dot-authenticate-role"`)
+        await browser.waitForElementByCss("#error")
+        let text = await browser.elementByCss("#error").text()
+        expect(text).toMatch(/AuthenticationError/)
+        if (browser) await browser.close()
+      })
+
+      it("Page.authenticate = {role} should work ", async () => {
+        let browser = await webdriver(appPort, "/login")
+        await waitFor(200)
+        await browser.elementByCss("#login").click()
+        await waitFor(200)
+        await browser.eval(`window.location = "/page-dot-authenticate-role-working"`)
+        await browser.waitForElementByCss("#content")
+        let text = await browser.elementByCss("#content").text()
+        expect(text).toMatch(/authenticated-basic-result/)
+        if (browser) await browser.close()
+      })
+
       it("Page.authenticate = {redirect} should work ", async () => {
         // Login
         let browser = await webdriver(appPort, "/login")

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

@@ -312,7 +312,7 @@ function withBlitzAuthPlugin<TProps = any>(Page: ComponentType<TProps> | BlitzPa
     let {authenticate, redirectAuthenticatedTo} = getAuthValues(Page, props)
 
     useAuthorizeIf(
-      authenticate === true,
+      !!authenticate,
       !authenticate ? undefined : typeof authenticate === "object" ? authenticate.role : undefined,
     )