feat: enable credential flow by switching to user-runtime config approach, add docs, improve some types (#10)

Author: BracketJohn

.github/nuxt-user-demo.jpg

@@ -29,7 +29,8 @@
     "@nuxt/kit": "^3.0.0-rc.12",
     "defu": "^6.1.0",
     "nanoid": "^4.0.0",
-    "next-auth": "^4.14.0"
+    "next-auth": "^4.14.0",
+    "ufo": "^0.8.6"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.0",

.github/nuxt-user-demo.png

@@ -1,21 +1,8 @@
-import { defineNuxtConfig } from 'nuxt/config'
-import GithubProvider from 'next-auth/providers/github'
 import NuxtAuth from '..'
 
 export default defineNuxtConfig({
-  modules: [
-    NuxtAuth
-  ],
+  modules: [NuxtAuth],
   auth: {
-    nextAuth: {
-      options: {
-        providers: [
-          GithubProvider({
-            clientId: 'enter-your-client-id-here',
-            clientSecret: 'enter-your-client-secret-here'
-          })
-        ]
-      }
-    }
+    origin: 'http://localhost:3000'
   }
 })

README.md

@@ -1,14 +1,25 @@
 <template>
   <div>
-    <button @click="signIn({ callbackUrl: '/'})">
-      sign in with github
+    <button @click="signIn(undefined, { callbackUrl: '/'})">
+      sign in
     </button>
-    <button @click="signIn({ callbackUrl: '/protected/inline' })">
-      sign in with redirect
+    <br>
+    <button @click="signIn('credentials', { callbackUrl: '/'})">
+      sign in (credential)
     </button>
+    <br>
+    <button @click="signIn('github', { callbackUrl: '/'})">
+      sign in (github)
+    </button>
+    <br>
+    <button @click="signIn(undefined, { callbackUrl: '/protected/inline' })">
+      sign in (with redirect to protected page)
+    </button>
+    <br>
     <button @click="signOut">
       sign out
     </button>
+    <br>
     <button @click="getSession()">
       refresh session
     </button>

package-lock.json

@@ -0,0 +1,47 @@
+import CredentialsProvider from 'next-auth/providers/credentials'
+import GithubProvider from 'next-auth/providers/github'
+import { NuxtAuthHandler } from '#auth'
+
+export default NuxtAuthHandler({
+  providers: [
+    // @ts-ignore Import is exported on .default during SSR, so we need to call it this way. May be fixed via Vite at some point
+    GithubProvider.default({
+      clientId: 'your-client-id',
+      clientSecret: 'your-client-secret'
+    }),
+    // @ts-ignore Import is exported on .default during SSR, so we need to call it this way. May be fixed via Vite at some point
+    CredentialsProvider.default({
+      // The name to display on the sign in form (e.g. 'Sign in with...')
+      name: 'Credentials',
+      // The credentials is used to generate a suitable form on the sign in page.
+      // You can specify whatever fields you are expecting to be submitted.
+      // e.g. domain, username, password, 2FA token, etc.
+      // You can pass any HTML attribute to the <input> tag through the object.
+      credentials: {
+        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
+        password: { label: 'Password', type: 'password' }
+      },
+      authorize (credentials: any) {
+        // You need to provide your own logic here that takes the credentials
+        // submitted and returns either a object representing a user or value
+        // that is false/null if the credentials are invalid.
+        // e.g. return { id: 1, name: 'J Smith', email: 'jsmith@example.com' }
+        // You can also use the `req` object to obtain additional parameters
+        // (i.e., the request IP address)
+        // eslint-disable-next-line no-console
+        console.log('provided credentials: ', credentials)
+        const user = { id: '1', name: 'J Smith', email: '[email protected]' }
+
+        if (user) {
+          // Any object returned will be saved in `user` property of the JWT
+          return user
+        } else {
+          // If you return null then an error will be displayed advising the user to check their details.
+          return null
+
+          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
+        }
+      }
+    })
+  ]
+})

package.json

@@ -1,4 +1,4 @@
-import { getServerSession } from '#sidebase/server'
+import { getServerSession } from '#auth'
 
 export default eventHandler(async (event) => {
   const session = await getServerSession(event)

playground/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { getServerSession } from '#sidebase/server'
+import { getServerSession } from '#auth'
 
 export default eventHandler(async (event) => {
   // Only protect a certain backend route