RFC: Documentation Ideas

[BracketJohn]

Describe the feature

Add documentation and optionally sample code for:

• [ ] example to configure different dbs
• [x] laravel sanctum
  • requests: #16 + more on discord
• [x] laravel JWT
  • requests: #32 + more on discord
• [x] optional user data (partially from #29)
  • added as recipe in #90: https://sidebase.io/nuxt-auth/recipes/custom-session-data
• [x] directus (see #64)
  • added as recipe in #90: https://sidebase.io/nuxt-auth/recipes/directus
• [x] strapi example (from https://discord.com/channels/473401852243869706/1038034318703984650/1041080023219716256)
  • added as recipe in #90: https://sidebase.io/nuxt-auth/recipes/strapi
• [x] how to add your own signin page
  • added in #90: https://sidebase.io/nuxt-auth/application-side/custom-sign-in-page
• [x] security section (from #7)
  • added in #90: https://sidebase.io/nuxt-auth/further-reading/security
• [x] how to pass credentials to the credential signIn directly (see [2])
  • added in #90: https://sidebase.io/nuxt-auth/application-side/session-access-and-management

Additional information

[1] attempt at strapi from discord user Hum+ (thanks 🙇 )

import CredentialsProvider from "next-auth/providers/credentials";
import { NuxtAuthHandler } from "#auth";

export default NuxtAuthHandler({
  secret: process.env.NUXT_SECRET,
  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
    CredentialsProvider.default({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: "Credentials",

      // Strapi expects { identifier: 'username or email', password: 'abcde' } we can deal with this at the fetch req
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'Test user' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials: any) {

        const user = await $fetch(`${process.env.STRAPI_BASE_URL}/api/auth/local/`, {
          method: "POST",
          body: JSON.stringify({
            identifier: credentials.username,
            password: credentials.password,
          }),
        });

        if (user) {

          return user;
        } else {

          return null;

        }
      },
    }),
  ],
  session: {
    jwt: true,
  },

});

[2] passing username and password to signIn, e.g., to use on ytour own page:

await signIn('credentials', { callbackUrl: '/', username: 'jsmith', password: 'hunter2' })

[madsh93]

Hi @BracketJohn

Would it be possible to add Directus CMS documentation as well? I am having troubles with refresh tokens. I've made a gist on my current setup.

https://gist.github.com/madsh93/eb2e36d19af3e73bfec8251f51448bc5

I'll happily provide access to a Directus CMS to test. I'm on Sidebase Discord server if you'd like to discuss it "Mads#6530".

[BracketJohn]

Hey @madsh93!

Thanks for the q -> I've moved this to #64 so that we can have a directus specific discussion there without filling up this docs ticket. I've posed a question to you there, can you go, check and reply?

[tmlmt]

Hey guys, kudos for the great work 🙌. Would love to see doc sections about creating your own sign in/out page, and using nuxt-auth in connection with a db (I am using Prisma). Thanks!

[BracketJohn]

Hey @tmlmt 👋

Thanks ❤️ We actually have documentation for custom sign in pages, check it out here: https://github.com/sidebase/nuxt-auth#custom-sign-in-page

[tmlmt]

Oh! Thank you 😊 @BracketJohn

[danpastori]

@BracketJohn Would be really stoked for Sanctum support as well! Check out this repo if you need any inspiration. It works great for Sanctum Auth: https://github.com/amrnn90/breeze-nuxt.

[vanling]

💡Idea: A small explanation about using/extending useFetch and providing and refreshing tokens

Currently looking into Interceptors from https://nuxt.com/docs/api/composables/use-fetch#example

await useFetch(
          () => 'https://api/items/test', {
            async onRequest({ request, options }) {
              if (process.client && Date.now() > session.value.accessTokenExpires) {
                await getSession()
              }
              options.headers = options.headers || {}
              options.headers.authorization = `Bearer ${session.value.accessToken}`
            },
            transform: ({ data }) => data[0],
          }
        )

I have no clue if calling getSession() here when token is expired is the correct way and place :)

[awacode21]

would like to have an example on how to use with auth0

[zoey-kaiser]

would like to have an example on how to use with auth0

Hi @awacode21 👋

We don't currently have an official one, however another developer posted a super helpful guide on using it! If you are struggling have a look at it: https://github.com/sidebase/nuxt-auth/issues/228#issuecomment-1455111997

Otherwise you can always refer to the offical NextAuth documentation. The code stays pretty such the same in our project aside from calling the function .default() on the Provider instance when setting it up: https://next-auth.js.org/providers/auth0

[jaimyborgman]

are there any plans made yet for supporting laravel sanctum?

[zoey-kaiser]

are there any plans made yet for supporting laravel sanctum?

Hi @jaimyborgman 👋

Currently I do not know when we would be able to get around to this. None of the core maintainers use Laravel, therefore requiring some setup on our ends to even be able to start looking into how to integrate it.

I did some digging around on the internet and found a somewhat maybe helpful article on how someone integrated Laravel Sanctum with NextAuth. It could potentially be a stepping stone for you to get started on it!

If you have any findings feel free to share with them us, so we can help you when your stuck or maybe collaborate on writing some docs for it!