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

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="regUsername">
+      <input v-model="password" type="password" placeholder="Password" data-testid="regPassword">
+      <button type="submit" data-testid="regSubmit">
+        sign up
+      </button>
+    </form>
+    <div v-if="response">
+      <h2>Response</h2>
+      <pre data-testid="regResponse">{{ response }}</pre>
+    </div>
+  </div>
+</template>

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

 } 
 const user = { 
   username, 
   picture: 'https://github.com/nuxt.png', 
   name: `User ${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) 
 return { 
   token: { 
     accessToken, 
     refreshToken 
   } 
 } 
@@ -0,0 +1,40 @@
+import { createError, eventHandler, readBody } from 'h3'
+import { z } from 'zod'
+import { sign } from 'jsonwebtoken'
+
+export const SECRET = 'dummy'
+
+export default eventHandler(async (event) => {
+  // Define the schema for validating the incoming data
+  const result = z.object({
+    username: z.string(),
+    password: z.string().min(6)
+  }).safeParse(await readBody(event))
+
+  // If validation fails, return an error
+  if (!result.success) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid input, please provide a valid email and a password of at least 6 characters.'
+    })
+  }
+
+  const { username } = result.data
+
+  const expiresIn = '1h' // token expiry (1 hour)
+  const user = { username } // Payload for the token, includes the email
+
+  // Sign the JWT with the user payload and secret
+  const accessToken = sign(user, SECRET, { expiresIn })
+
+  // Return a success response with the email and the token
+  return {
+    message: 'Signup successful!',
+    user: {
+      username
+    },
+    token: {
+      accessToken
+    }
+  }
+})

playground-local/tests/local.spec.ts

@@ -59,4 +59,30 @@ describe('local Provider', async () => {
     await signoutButton.click()
     await playwrightExpect(status).toHaveText(STATUS_UNAUTHENTICATED)
   })
+
+  it('should sign up and return signup data when preventLoginFlow: true', async () => {
+    const page = await createPage('/register') // Navigate to signup page
+
+    const [
+      usernameInput,
+      passwordInput,
+      submitButton,
+    ] = await Promise.all([
+      page.getByTestId('regUsername'),
+      page.getByTestId('regPassword'),
+      page.getByTestId('regSubmit')
+    ])
+
+    await usernameInput.fill('newuser')
+    await passwordInput.fill('hunter2')
+
+    // Click button and wait for API to finish
+    const responsePromise = page.waitForResponse(/\/api\/auth\/signup/)
+    await submitButton.click()
+    const response = await responsePromise
+
+    // Expect the response to return signup data
+    const responseBody = await response.json() // Parse response
+    playwrightExpect(responseBody).toBeDefined() // Ensure data is returned
+  })
 })

src/runtime/composables/local/useAuth.ts

@@ -1,5 +1,4 @@
 import { type Ref, readonly } from 'vue'
-
 import type { CommonUseAuthReturn, GetSessionOptions, SecondarySignInOptions, SignInFunc, SignOutFunc, SignUpOptions } from '../../types'
 import { jsonPointerGet, objectFromJsonPointer, useTypedBackendConfig } from '../../helpers'
 import { _fetch } from '../../utils/fetch'
@@ -160,17 +159,20 @@ async function getSession(getSessionOptions?: GetSessionOptions): Promise<Sessio
   return data.value
 }
 
-async function signUp(credentials: Credentials, signInOptions?: SecondarySignInOptions, signUpOptions?: SignUpOptions) {
+async function signUp<T>(credentials: Credentials, signInOptions?: SecondarySignInOptions, signUpOptions?: SignUpOptions): Promise<T> {
   const nuxt = useNuxtApp()
 
   const { path, method } = useTypedBackendConfig(useRuntimeConfig(), 'local').endpoints.signUp
-  await _fetch(nuxt, path, {
+
+  // Holds result from fetch to be returned if signUpOptions?.preventLoginFlow is true
+  const result = await _fetch<T>(nuxt, path, {
     method,
     body: credentials
   })
 
   if (signUpOptions?.preventLoginFlow) {
-    return
+    // Returns result
+    return result
   }
 
   return signIn(credentials, signInOptions)