Add support for local authentication as an alternative to auth0

[Rednas83]

I am working on a standalone project without an internet connection.

Can you also add support for setting up the authentication locally?

For now I can use auth0 but it's still a bit unclear to me how to set this up with the V3 template. Should I just create an account on https://auth0.com/ or do you need to run a seperate app for the authentication?

[Rednas83]

Looking at https://next-auth.js.org/configuration/providers/credentials it probably requires to add a credentialsProvider in server/api/auth

[Rednas83]

For the sqllite support it's probably better to make the password optional in the validation. This because sqlite has no authentication. DATABASE_PASSWORD: z.string().optional(),

Perhaps you can also mention to setup the auth0 application with Allow Callback URLs = http://localhost:3000/api/auth/callback/auth0 Allow Logout URLs = http://localhost:3000

Also for me it was not directly clear what I had to fill in in NUXT_AUTH0_ISSUER. It appeared to be be the domain with https:// as a prefix. NUXT_AUTH0_ISSUER="https://xxxxxxxxxxxxxxxxxxxxxxx.us.auth0.com"

For setting up local authentication server/api/auth/[...].ts could be replaced with but this will of course replace oAuth

// file: ~/server/api/auth/[...].ts
import CredentialsProvider from 'next-auth/providers/credentials'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { NuxtAuthHandler } from '#auth'
import { prisma } from '~~/server/prisma'
import { envConfig } from '~~/envConfig'
export default NuxtAuthHandler({
  adapter: PrismaAdapter(prisma),
  // # NUXT_SECRET - run: 'openssl rand -base64 64' to create a new key  
  secret: 'your-secret-here',
  providers: [
    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
    CredentialsProvider.default({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' }
      },
      authorize (credentials: any) {
        const user = { id: '1', name: envConfig.NUXT_AUTH_NAME, username: envConfig.NUXT_AUTH_NAME, password: envConfig.NUXT_AUTH_PASSWORD }
        if (credentials?.username === user.username && credentials?.password === user.password) {          
          return user
        } else {
          // eslint-disable-next-line no-console
          console.error('Warning: Malicious login attempt registered, bad credentials provided')          
          return null          
        }
      }
    })
  ]
})

[CRBroughton]

Hi there!

Apologises for not seeing this sooner. Definitely agree with support for local authentication and better SQLite support. I'll see if I can put some time in relatively soon to get this moving.

I'll also see if I can dedicate some time to improving the documentation on the V3 site; It's true that most of the relevant documentation can be found on Auth0's pages, but it would still be worthwhile for V3 specifically.

[Rednas83]

Do you also have a plan to add an example for a todo application?

I can see a definition for a tasks table, but no code/page to interact with it yet.

[Rednas83]

Perhaps you can also have a look at https://github.com/Atinux/nuxt-todos-edge Which uses Drizzle ORM and nuxt ui.

And also https://formkit.com/essentials/schema#form-generation-example

[CRBroughton]

Good shout, I think we can add something similar with the local auth changes

[zoey-kaiser]

Hi @Rednas83 👋

I am one of the maintainers of NuxtAuth, which this starter uses! The version of NuxtAuth inside the starter is a few versions behind the latest. In v0.6 we released our own standalone Authentication solutions built either upon a local or a refresh schema.

You should be able to continue using the starter and just by upgrading NuxtAuth, you can use one of these. The "interaction" points with the authentication layer (composables etc.) stay the same, so you would not need to migrate your frontend and only reconfigure how the authentication is handled.

You can see an overview and find our docs here: https://sidebase.io/nuxt-auth/getting-started#which-provider-should-i-pick

CC @CRBroughton, as you could build your local authentication method upon our module and easily let the user switch between Auth0 and local inside their nuxt config!

[CRBroughton]

Thanks for the heads up on the changes @zoey-kaiser :) I should be back at my computer on the weekend, so I'll see about getting these changes in relatively soon. Life's been a bit hectic recently so apologises for any delays.