Auth smoke tests

__fixtures__/test-project/.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
   "recommendations": [
-    "redwoodjs.redwood",
     "dbaeumer.vscode-eslint",
     "eamodio.gitlens",
     "ofhumanbondage.react-proptypes-intellisense",

__fixtures__/test-project/api/src/directives/requireAuth/requireAuth.test.ts

@@ -12,7 +12,7 @@ describe('requireAuth directive', () => {
     // If you want to set values in context, pass it through e.g.
     // mockRedwoodDirective(requireAuth, { context: { currentUser: { id: 1, name: 'Lebron McGretzky' } }})
     const mockExecution = mockRedwoodDirective(requireAuth, {
-      context: { currentUser: { id: 1, roles: 'ADMIN' } },
+      context: { currentUser: { id: 1, roles: 'ADMIN', email: '[email protected]' } },
     })
 
     expect(mockExecution).not.toThrowError()

__fixtures__/test-project/api/src/functions/auth.ts

@@ -139,6 +139,19 @@ export const handler = async (event, context) => {
       resetTokenExpiresAt: 'resetTokenExpiresAt',
     },
 
+    // Specifies attributes on the cookie that dbAuth sets in order to remember
+    // who is logged in. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies
+    cookie: {
+      HttpOnly: true,
+      Path: '/',
+      SameSite: 'Strict',
+      Secure: true,
+
+      // If you need to allow other domains (besides the api side) access to
+      // the dbAuth session cookie:
+      // Domain: 'example.com',
+    },
+
     forgotPassword: forgotPasswordOptions,
     login: loginOptions,
     resetPassword: resetPasswordOptions,

__fixtures__/test-project/api/src/graphql/posts.sdl.ts

@@ -22,7 +22,7 @@ export const schema = gql`
   }
 
   type Mutation {
-    createPost(input: CreatePostInput!): Post! @requireAuth
+    createPost(input: CreatePostInput!): Post! @requireAuth(roles: ["ADMIN"])
     updatePost(id: Int!, input: UpdatePostInput!): Post! @requireAuth
     deletePost(id: Int!): Post! @requireAuth
   }

__fixtures__/test-project/api/src/lib/auth.ts

@@ -21,7 +21,7 @@ import { db } from './db'
 export const getCurrentUser = async (session) => {
   return await db.user.findUnique({
     where: { id: session.id },
-    select: { id: true, roles: true },
+    select: { id: true, roles: true, email: true },
   })
 }
 

__fixtures__/test-project/package.json

@@ -9,10 +9,10 @@
   },
   "devDependencies": {
     "@redwoodjs/core": "0.49.0",
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.7",
-    "postcss-loader": "6.2.1",
-    "tailwindcss": "3.0.23"
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.8",
+    "postcss-loader": "^6.2.1",
+    "tailwindcss": "^3.0.23"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",
@@ -28,4 +28,4 @@
   "scripts": {
     "postinstall": ""
   }
-}
+}

__fixtures__/test-project/web/src/Routes.tsx

@@ -7,7 +7,7 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route, Set } from '@redwoodjs/router'
+import { Router, Route, Private, Set } from '@redwoodjs/router'
 import PostsLayout from 'src/layouts/PostsLayout'
 
 import BlogLayout from 'src/layouts/BlogLayout'
@@ -26,6 +26,9 @@ const Routes = () => {
         <Route path="/posts" page={PostPostsPage} name="posts" />
       </Set>
       <Set wrap={BlogLayout}>
+        <Private unauthenticated="login">
+          <Route path="/profile" page={ProfilePage} name="profile" />
+        </Private>
         <Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" />
         <Route path="/contact" page={ContactPage} name="contact" />
         <Route path="/about" page={AboutPage} name="about" prerender />

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx

@@ -0,0 +1,7 @@
+import ProfilePage from './ProfilePage'
+
+export const generated = () => {
+  return <ProfilePage />
+}
+
+export default { title: 'Pages/ProfilePage' }

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.test.tsx

@@ -0,0 +1,21 @@
+import { render, waitFor, screen } from '@redwoodjs/testing/web'
+
+import ProfilePage from './ProfilePage'
+
+describe('ProfilePage', () => {
+  it('renders successfully', async () => {
+    mockCurrentUser({
+      email: '[email protected]',
+      id: 84849020,
+      roles: 'BAZINGA',
+    })
+
+    await waitFor(async () => {
+      expect(() => {
+        render(<ProfilePage />)
+      }).not.toThrow()
+    })
+
+    expect(await screen.findByText('[email protected]')).toBeInTheDocument()
+  })
+})

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.tsx

@@ -0,0 +1,50 @@
+import { useAuth } from '@redwoodjs/auth'
+import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
+
+const ProfilePage = () => {
+  const { currentUser, isAuthenticated, hasRole, loading } = useAuth()
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
+
+  return (
+    <>
+      <MetaTags title="Profile" description="Profile page" />
+
+      <h1 className="text-2xl">Profile</h1>
+
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(currentUser).map((key) => {
+            return (
+              <tr key={key}>
+                <td>{key.toUpperCase()}</td>
+                <td>{currentUser[key]}</td>
+              </tr>
+            )
+          })}
+
+          <tr key="isAuthenticated">
+            <td>isAuthenticated</td>
+            <td>{JSON.stringify(isAuthenticated)}</td>
+          </tr>
+
+          <tr key="hasRole">
+            <td>Is Admin</td>
+            <td>{JSON.stringify(hasRole('ADMIN'))}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+export default ProfilePage

tasks/smoke-test/playwright-fixtures/devServer.fixture.ts

@@ -1,38 +1,43 @@
 /* eslint-disable no-empty-pattern */
 import { test as base } from '@playwright/test'
 import execa from 'execa'
+import isPortReachable from 'is-port-reachable'
 
 import { waitForServer } from '../util'
 
 // Declare worker fixtures.
-type DevServerFixtures = {
+export type DevServerFixtures = {
   webServerPort: number
   apiServerPort: number
   server: any
+  webUrl: string
 }
 
 // Note that we did not provide an test-scoped fixtures, so we pass {}.
 const test = base.extend<any, DevServerFixtures>({
   webServerPort: [
-    async ({}, use, workerInfo) => {
+    async ({}, use) => {
       // "port" fixture uses a unique value of the worker process index.
-      await use(9000 + workerInfo.workerIndex)
+      await use(9000)
     },
     { scope: 'worker' },
   ],
   apiServerPort: [
-    async ({}, use, workerInfo) => {
-      // "port" fixture uses a unique value of the worker process index.
-      await use(9001 + workerInfo.workerIndex)
+    async ({}, use) => {
+      await use(9001)
+    },
+    { scope: 'worker' },
+  ],
+  webUrl: [
+    async ({ webServerPort }, use) => {
+      await use(`localhost:${webServerPort}`)
     },
     { scope: 'worker' },
   ],
 
   // "server" fixture starts automatically for every worker - we pass "auto" for that.
   server: [
     async ({ webServerPort, apiServerPort }, use) => {
-      console.log('Starting dev server.....')
-
       const projectPath = process.env.PROJECT_PATH
 
       if (!projectPath) {
@@ -41,28 +46,40 @@ const test = base.extend<any, DevServerFixtures>({
         )
       }
 
-      console.log(`Launching dev server at ${projectPath}`)
+      const isServerAlreadyUp = await isPortReachable(webServerPort, {
+        host: 'localhost',
+      })
 
-      // Don't wait for this to finish, because it doens't
-      const devServerHandler = execa.command(
-        `yarn rw dev --fwd="--no-open" --no-generate`,
-        {
-          cwd: projectPath,
-          shell: true,
-          env: {
-            WEB_DEV_PORT: webServerPort,
-            API_DEV_PORT: apiServerPort,
-          },
-        }
-      )
+      if (isServerAlreadyUp) {
+        console.log('Reusing server....')
+        console.log({
+          webServerPort,
+          apiServerPort,
+        })
+      } else {
+        console.log(`Launching dev server at ${projectPath}`)
 
-      // Pipe out logs so we can debug, when required
-      devServerHandler.stdout.on('data', (data) => {
-        console.log(
-          '[devServer-fixture] ',
-          Buffer.from(data, 'utf-8').toString()
+        // Don't wait for this to finish, because it doens't
+        const devServerHandler = execa.command(
+          `yarn rw dev --fwd="--no-open" --no-generate`,
+          {
+            cwd: projectPath,
+            shell: true,
+            env: {
+              WEB_DEV_PORT: webServerPort,
+              API_DEV_PORT: apiServerPort,
+            },
+          }
         )
-      })
+
+        // Pipe out logs so we can debug, when required
+        devServerHandler.stdout.on('data', (data) => {
+          console.log(
+            '[devServer-fixture] ',
+            Buffer.from(data, 'utf-8').toString()
+          )
+        })
+      }
 
       console.log('Waiting for dev servers.....')
       await waitForServer(webServerPort, 1000)

tasks/smoke-test/playwright.config.ts

@@ -3,6 +3,13 @@ import type { PlaywrightTestConfig } from '@playwright/test'
 // See https://playwright.dev/docs/test-configuration#global-configuration
 const config: PlaywrightTestConfig = {
   timeout: 60_000,
+  // Leaving this here to make debugging easier, by uncommenting
+  // use: {
+  //   launchOptions: {
+  //     slowMo: 500,
+  //     headless: false,
+  //   },
+  // },
 }
 
 export default config

tasks/smoke-test/tests/authChecks.spec.ts

@@ -0,0 +1,90 @@
+import {
+  PlaywrightTestArgs,
+  expect,
+  PlaywrightWorkerArgs,
+} from '@playwright/test'
+import execa from 'execa'
+import fs from 'node:fs'
+import path from 'node:path'
+
+import devServerTest, {
+  DevServerFixtures,
+} from '../playwright-fixtures/devServer.fixture'
+
+import { loginAsTestUser, signUpTestUser } from './common'
+
+// Signs up a user before these tests
+
+devServerTest.beforeAll(async ({ browser }: PlaywrightWorkerArgs) => {
+  const page = await browser.newPage()
+
+  await signUpTestUser({
+    // @NOTE we can't access webUrl in beforeAll, so hardcoded
+    // But we can switch to beforeEach if required
+    webUrl: 'http://localhost:9000',
+    page,
+  })
+
+  await page.close()
+})
+
+devServerTest(
+  'useAuth hook, auth redirects checks',
+  async ({ page, webUrl }: PlaywrightTestArgs & DevServerFixtures) => {
+    await page.goto(`${webUrl}/profile`)
+
+    // To check redirects to the login page
+    await expect(page).toHaveURL(`http://${webUrl}/login?redirectTo=/profile`)
+
+    await loginAsTestUser({ page, webUrl })
+
+    await page.goto(`${webUrl}/profile`)
+
+    const usernameRow = await page.waitForSelector('*css=tr >> text=EMAIL')
+    await expect(await usernameRow.innerHTML()).toBe(
+      '<td>EMAIL</td><td>[email protected]</td>'
+    )
+
+    const isAuthenticatedRow = await page.waitForSelector(
+      '*css=tr >> text=isAuthenticated'
+    )
+    await expect(await isAuthenticatedRow.innerHTML()).toBe(
+      '<td>isAuthenticated</td><td>true</td>'
+    )
+
+    const isAdminRow = await page.waitForSelector('*css=tr >> text=Is Admin')
+    await expect(await isAdminRow.innerHTML()).toBe(
+      '<td>Is Admin</td><td>false</td>'
+    )
+  }
+)
+
+devServerTest('requireAuth graphql checks', async ({ page, webUrl }) => {
+  // Auth
+  await page.goto(`${webUrl}/posts/1/edit`)
+
+  await page.locator('input[name="title"]').fill('This is an edited title!')
+
+  // unAuthenticated
+  await page.click('text=SAVE')
+  await expect(
+    page.locator("text=You don't have permission to do that")
+  ).toBeTruthy()
+
+  // Authenticated
+  await loginAsTestUser({ webUrl, page })
+  await page.goto(`${webUrl}/posts/1/edit`)
+  await page.locator('input[name="title"]').fill('This is an edited title!')
+
+  await Promise.all([
+    page.waitForNavigation({ url: '**/' }),
+    page.click('text=SAVE'),
+  ])
+
+  // Log Out
+  await page.goto(`${webUrl}/`)
+  await page.click('text=Log Out')
+  await expect(page.locator('text=Login')).toBeTruthy()
+
+  await expect(page.locator('text=This is an edited title!')).toBeTruthy()
+})