Enh(#843): Allow signup flow return data when preventLoginFlow is true (#903)

* added enhancment to allow signUp function return response if SignUpOption?.PreventLoginFlow is true

* sign up function to return data, test written

* Discard changes to pnpm-lock.yaml

* fix: oxlint issue

* enh: added generic type support to signUp function for flexible return types

* Resolved lint errors and formatting issues

* Update src/runtime/composables/local/useAuth.ts

Co-authored-by: Zoey <[email protected]>

* Update playground-local/pages/register.vue by aligning test-ids

Co-authored-by: Marsel Shayhin <[email protected]>

* Update playground-local/pages/register.vue to remove unused test-id regResponse

Co-authored-by: Marsel Shayhin <[email protected]>

* Update playground-local/tests/local.spec.ts by unifying updated test-ids

Co-authored-by: Marsel Shayhin <[email protected]>

* Update src/runtime/composables/local/useAuth.ts

Co-authored-by: Marsel Shayhin <[email protected]>

* fix: fix a type in `signUp` function

* refact: make demo implementation more unified

* test: fix E2E tests

* chore: remove unused imports

---------

Co-authored-by: Zoey <[email protected]>
Co-authored-by: Marsel Shayhin <[email protected]>
Co-authored-by: Marsel Shaikhin <[email protected]>

Author: 3 people

playground-local/nuxt.config.ts

@@ -8,7 +8,8 @@ export default defineNuxtConfig({
     provider: {
       type: 'local',
       endpoints: {
-        getSession: { path: '/user' }
+        getSession: { path: '/user' },
+        signUp: { path: '/signup', method: 'post' }
       },
       pages: {
         login: '/'

playground-local/pages/index.vue

@@ -10,6 +10,10 @@ definePageMeta({ auth: false })
       -> manual login, logout, refresh button
     </nuxt-link>
     <br>
+    <nuxt-link to="/register">
+      -> Click to signup
+    </nuxt-link>
+    <br>
     <nuxt-link to="/protected/globally">
       -> globally protected page
     </nuxt-link>

playground-local/pages/register.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue'
+import { definePageMeta, useAuth } from '#imports'
+
+const { signUp } = useAuth()
+
+const username = ref('')
+const password = ref('')
+const response = ref()
+
+async function register() {
+  try {
+    const signUpResponse = await signUp({ username: username.value, password: password.value }, undefined, { preventLoginFlow: true })
+    response.value = signUpResponse
+  }
+  catch (error) {
+    response.value = { error: 'Failed to sign up' }
+    console.error(error)
+  }
+}
+
+definePageMeta({
+  auth: {
+    unauthenticatedOnly: true,
+    navigateAuthenticatedTo: '/',
+  },
+})
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent="register">
+      <p><i>*password should have at least 6 characters</i></p>
+      <input v-model="username" type="text" placeholder="Username" data-testid="register-username">
+      <input v-model="password" type="password" placeholder="Password" data-testid="register-password">
+      <button type="submit" data-testid="register-submit">
+        sign up
+      </button>
+    </form>
+    <div v-if="response">
+      <h2>Response</h2>
+      <pre>{{ response }}</pre>
+    </div>
+  </div>
+</template>

playground-local/server/api/auth/login.post.ts

@@ -1,52 +1,11 @@
 import { createError, eventHandler, readBody } from 'h3'
-import { z } from 'zod'
-import { sign } from 'jsonwebtoken'
+import { createUserTokens, credentialsSchema, getUser } from '~/server/utils/session'
 
 /*
  * DISCLAIMER!
  * This is a demo implementation, please create your own handlers
  */
 
-/**
- * This is a demo secret.
- * Please ensure that your secret is properly protected.
- */
-export const SECRET = 'dummy'
-
-/** 30 seconds */
-export const ACCESS_TOKEN_TTL = 30
-
-export interface User {
-  username: string
-  name: string
-  picture: string
-}
-
-export interface JwtPayload extends User {
-  scope: Array<'test' | 'user'>
-  exp?: number
-}
-
-interface TokensByUser {
-  access: Map<string, string>
-  refresh: Map<string, string>
-}
-
-/**
- * Tokens storage.
- * You will need to implement your own, connect with DB/etc.
- */
-export const tokensByUser: Map<string, TokensByUser> = new Map()
-
-/**
- * We use a fixed password for demo purposes.
- * You can use any implementation fitting your usecase.
- */
-const credentialsSchema = z.object({
-  username: z.string().min(1),
-  password: z.literal('hunter2')
-})
-
 export default eventHandler(async (event) => {
   const result = credentialsSchema.safeParse(await readBody(event))
   if (!result.success) {
@@ -56,42 +15,13 @@ export default eventHandler(async (event) => {
     })
   }
 
-  // Emulate login
-  const { username } = result.data
-  const user = {
-    username,
-    picture: 'https://github.com/nuxt.png',
-    name: `User ${username}`
-  }
+  // Emulate successful login
+  const user = await getUser(result.data.username)
 
-  const tokenData: JwtPayload = { ...user, scope: ['test', 'user'] }
-  const accessToken = sign(tokenData, SECRET, {
-    expiresIn: ACCESS_TOKEN_TTL
-  })
-  const refreshToken = sign(tokenData, SECRET, {
-    // 1 day
-    expiresIn: 60 * 60 * 24
-  })
-
-  // Naive implementation - please implement properly yourself!
-  const userTokens: TokensByUser = tokensByUser.get(username) ?? {
-    access: new Map(),
-    refresh: new Map()
-  }
-  userTokens.access.set(accessToken, refreshToken)
-  userTokens.refresh.set(refreshToken, accessToken)
-  tokensByUser.set(username, userTokens)
+  // Sign the tokens
+  const tokens = await createUserTokens(user)
 
   return {
-    token: {
-      accessToken,
-      refreshToken
-    }
+    token: tokens
   }
 })
-
-export function extractToken(authorizationHeader: string) {
-  return authorizationHeader.startsWith('Bearer ')
-    ? authorizationHeader.slice(7)
-    : authorizationHeader
-}

playground-local/server/api/auth/refresh.post.ts

@@ -1,6 +1,5 @@
 import { createError, eventHandler, getRequestHeader, readBody } from 'h3'
-import { sign, verify } from 'jsonwebtoken'
-import { type JwtPayload, SECRET, type User, extractToken, tokensByUser } from './login.post'
+import { checkUserTokens, decodeToken, extractTokenFromAuthorizationHeader, getTokensByUser, refreshUserAccessToken } from '~/server/utils/session'
 
 /*
  * DISCLAIMER!
@@ -20,16 +19,16 @@ export default eventHandler(async (event) => {
   }
 
   // Verify
-  const decoded = verify(refreshToken, SECRET) as JwtPayload | undefined
+  const decoded = decodeToken(refreshToken)
   if (!decoded) {
     throw createError({
       statusCode: 401,
       statusMessage: 'Unauthorized, refreshToken can\'t be verified'
     })
   }
 
-  // Get tokens
-  const userTokens = tokensByUser.get(decoded.username)
+  // Get the helper (only for demo, use a DB in your implementation)
+  const userTokens = getTokensByUser(decoded.username)
   if (!userTokens) {
     throw createError({
       statusCode: 401,
@@ -38,12 +37,12 @@ export default eventHandler(async (event) => {
   }
 
   // Check against known token
-  const requestAccessToken = extractToken(authorizationHeader)
-  const knownAccessToken = userTokens.refresh.get(body.refreshToken)
-  if (!knownAccessToken || knownAccessToken !== requestAccessToken) {
+  const requestAccessToken = extractTokenFromAuthorizationHeader(authorizationHeader)
+  const tokensValidityCheck = checkUserTokens(userTokens, requestAccessToken, refreshToken)
+  if (!tokensValidityCheck.valid) {
     console.log({
       msg: 'Tokens mismatch',
-      knownAccessToken,
+      knownAccessToken: tokensValidityCheck.knownAccessToken,
       requestAccessToken
     })
     throw createError({
@@ -52,25 +51,10 @@ export default eventHandler(async (event) => {
     })
   }
 
-  // Invalidate old access token
-  userTokens.access.delete(knownAccessToken)
-
-  const user: User = {
-    username: decoded.username,
-    picture: decoded.picture,
-    name: decoded.name
-  }
-
-  const accessToken = sign({ ...user, scope: ['test', 'user'] }, SECRET, {
-    expiresIn: 60 * 5 // 5 minutes
-  })
-  userTokens.refresh.set(refreshToken, accessToken)
-  userTokens.access.set(accessToken, refreshToken)
+  // Call the token refresh logic
+  const tokens = await refreshUserAccessToken(userTokens, refreshToken)
 
   return {
-    token: {
-      accessToken,
-      refreshToken
-    }
+    token: tokens
   }
 })

playground-local/server/api/auth/signup.post.ts

@@ -0,0 +1,24 @@
+import { createError, eventHandler, readBody } from 'h3'
+import { createUserTokens, credentialsSchema, getUser } from '~/server/utils/session'
+
+export default eventHandler(async (event) => {
+  const result = credentialsSchema.safeParse(await readBody(event))
+  if (!result.success) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: `Invalid input, please provide a valid username, and a password must be 'hunter2' for this demo.`
+    })
+  }
+
+  // Emulate successful registration
+  const user = await getUser(result.data.username)
+
+  // Create the sign-in tokens
+  const tokens = await createUserTokens(user)
+
+  // Return a success response with the email and the token
+  return {
+    user,
+    token: tokens
+  }
+})

playground-local/server/api/auth/user.get.ts

@@ -1,17 +1,21 @@
 import { createError, eventHandler, getRequestHeader } from 'h3'
-import { verify } from 'jsonwebtoken'
-import { type JwtPayload, SECRET, extractToken, tokensByUser } from './login.post'
+import { type JwtPayload, checkUserAccessToken, decodeToken, extractTokenFromAuthorizationHeader, getTokensByUser } from '~/server/utils/session'
 
 export default eventHandler((event) => {
   const authorizationHeader = getRequestHeader(event, 'Authorization')
   if (typeof authorizationHeader === 'undefined') {
     throw createError({ statusCode: 403, statusMessage: 'Need to pass valid Bearer-authorization header to access this endpoint' })
   }
 
-  const extractedToken = extractToken(authorizationHeader)
+  const requestAccessToken = extractTokenFromAuthorizationHeader(authorizationHeader)
   let decoded: JwtPayload
   try {
-    decoded = verify(extractedToken, SECRET) as JwtPayload
+    const decodeTokenResult = decodeToken(requestAccessToken)
+
+    if (!decodeTokenResult) {
+      throw new Error('Expected decoded JwtPayload to be non-empty')
+    }
+    decoded = decodeTokenResult
   }
   catch (error) {
     console.error({
@@ -21,9 +25,18 @@ export default eventHandler((event) => {
     throw createError({ statusCode: 403, statusMessage: 'You must be logged in to use this endpoint' })
   }
 
+  // Get tokens of a user (only for demo, use a DB in your implementation)
+  const userTokens = getTokensByUser(decoded.username)
+  if (!userTokens) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'User not found'
+    })
+  }
+
   // Check against known token
-  const userTokens = tokensByUser.get(decoded.username)
-  if (!userTokens || !userTokens.access.has(extractedToken)) {
+  const tokensValidityCheck = checkUserAccessToken(userTokens, requestAccessToken)
+  if (!tokensValidityCheck.valid) {
     throw createError({
       statusCode: 401,
       statusMessage: 'Unauthorized, user is not logged in'