Make next-auth framework agnostic (Vite, Vue, Express...)

[brillout]

UPDATE from the maintainer (@balazsorban44)

We just shipped @auth/core, and NextAuth.js is becoming Auth.js.
See more info here: https://twitter.com/balazsorban44/status/1603082914362986496

Follow up of https://twitter.com/balazsorban44/status/1410641689715347461.

cc @s-kris @balazsorban44

next-auth can actually already be used with Vite today thanks to https://github.com/s-kris/vite-ssr-next-auth.

---

UPDATE FROM MAINTAINER:

Proof of concept:

• SvelteKit: https://sveltekit-next-auth.vercel.app/ (thanks @wobsoriano).
• Nuxt: https://nuxt-next-auth.vercel.app/ (thanks @wobsoriano).
• vite-plugin-ssr: https://github.com/iMrDJAi/vps-nextauth-example (thanks @iMrDJAi) and https://github.com/s-kris/vite-ssr-next-auth (thanks @s-kris).

v4 has been marked as stable, and the source code has been refactored to be Next.js API routes agnostic. It is still undocumented, but we are ready to discuss how to integrate with other frameworks in the open. If you are developing in one of those communities (Vue, Svelte etc.), feel free to reach out!

[balazsorban44]

I'm very hopeful about this. We might have to do small adjustments, but I think in most cases, a tiny wrapper on top of NextAuth would be enough. The ground work could be done as early as in v4 (aiming for a release this summer).

I already started to decouple/better namespace our client code, in v4 it will be under next-auth/react

See #1473

[brillout]

The ground work could be done as early as in v4 (aiming for a release this summer)

Exciting 😍.

Will I then be able to use NextAuth.js in a let's say Vite + Vue app?

I'm developing a framework ("Vike") on top of Vite + vite-plugin-ssr + RPC and I'd love to offer authentication to both my React and Vue users with NextAuth.js.

Thanks for your wonderful work, it's lovely to see the JS ecosystem maturing.

[balazsorban44]

If we rewrite the backend a bit, as long as your framework can set cookies and do redirects and handle basic POST/GET requests, it should be good. We would need to separate the server/index.js file in a way that it is only a tiny wrapper for Next.js and the core stuff could be framework agnostic.

I liked the Sveltekit endpoint approach:

https://kit.svelte.dev/docs#routing-endpoints

[brillout]

Neat & yes, the backend integration should work then.

How about Vue?

You mentioned:

I already started to decouple/better namespace our client code, in v4 it will be under next-auth/react

Will we be able to have a next-auth/vue? I can see myself (and potentially other Vue users) to contribute.

[balazsorban44]

Yes, that would be easy I think.

Here is the source code for the react specific frontend:

https://github.com/nextauthjs/next-auth/blob/next/src/client/react.js

We still have to work out some small things like tab syncing and invalidation of the session, but other than that it should not be hard, hopefully.

[brillout]

👌.

Had a quick look over the source and yea should be fairly easy to port it to Vue's composition API; there aren't that many React specific things going on. AFACIT a common module that factors out the React/view-framework agnostic code should make porting quite easy.

Can't wait to see NextAuth.js to become the de facto standard — Vite & Vue users will love it :-).

[wobsoriano]

It's quite amazing that you don't even need to install react to use it with Nuxt. Here's a repo on how someone could use next-auth with nuxt! https://nuxt-next-auth.vercel.app/

https://github.com/wobsoriano/nuxt-next-auth

[brillout]

@wobsoriano Wow neat... would you be up to develop some Vue composition functions? Basically like next-auth/react but for Vue. I'd happily assist/review.

[balazsorban44]

That's awesome @wobsoriano! Looking forward to set some time aside for this enhancement, so we can start the expansion! I will probably need some help for the Vue client.

[wobsoriano]

Copied contents of next-auth/client and updated some lines to make it work with Vue's Composition API https://github.com/wobsoriano/nuxt-next-auth/blob/master/modules/next-auth/client.js

Most if it are working now - useSession, getSession, signIn, signOut, getCsrfToken, getProviders.

// store/index.js
export const actions = {
    async nuxtServerInit({ commit }, { req }) {
        try {
            const session = await getSession({ req })
            commit('SET_SESSION', session);
        } catch (e) {
            commit('SET_SESSION', null);
        }
    }
}

<template>
  <div>
    <div v-for="provider in Object.values(providers)" :key="provider.id">
      <button @click="signIn(provider.id)">Sign in with {{ provider.name }}</button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api';
import { getProviders, signIn } from '~/modules/next-auth/client';

export default defineComponent({
  middleware: 'guest',
  setup() {
    return {
      signIn
    }
  },
  async asyncData() {
    const providers = await getProviders()
    return {
      providers
    }
  }
})
</script>

and adding configs directly to nuxt.config.js

import Providers from 'next-auth/providers';

export default {
  // other nuxt config
  nextAuth: {
    providers: [
      Providers.GitHub({
          clientId: process.env.GITHUB_CLIENT_ID,
          clientSecret: process.env.GITHUB_CLIENT_SECRET
      }),
    ],
  }
}

[brillout]

@wobsoriano Neat neat 👌. What was your reason to use Nuxt's composition API instead of Vue's one? What do you think of factoring out the common code between next-auth/client and your version? That way anyone can use NextAuth.js with anything e.g. with Vue's composition API

[wobsoriano]

@wobsoriano Neat neat 👌. What was your reason to use Nuxt's composition API instead of Vue's one? What do you think of factoring out the common code between next-auth/client and your version? That way anyone can use NextAuth.js with anything e.g. with Vue's composition API

Actually published a simple Nuxt module for this that later we can add to next-auth/client since Nuxt 2.0 supports Vue 2 only

https://github.com/wobsoriano/nuxt-next-auth

[brillout]

Nice 👍. Ideally nuxt-next-auth would be only a thin wrapper around a next-auth view-framework agnostic library. Right now there is a lot of duplicated code between next-auth/client and nuxt-next-auth right?

[wobsoriano]

Nice 👍. Ideally nuxt-next-auth would be only a thin wrapper around a next-auth view-framework agnostic library. Right now there is a lot of duplicated code between next-auth/client and nuxt-next-auth right?

Yeah, the whole client.js file is copied

[brillout]

I guess it should be easy to factor out the common code?

The common code could then live at github.com/nextauthjs.

Thoughts?

[zomars]

And Express.js example would be awesome!

[kbventures]

I second that

[zenflow]

@zomars @kbventures
#531 (comment)

[wobsoriano]

https://github.com/wobsoriano/authey

[balazsorban44]

Work on SvelteKit officially has started! We now have a MVP in the monorepo! Over the coming weeks, we'll be working on cleaning it up and creating a package for it.

https://github.com/nextauthjs/next-auth/tree/main/apps/playground-sveltekit

[wobsoriano]

typo in url 😄

[Dark-Roll]

appa -> apps

[balazsorban44]

Thanks, fixed. 👍

[weepy]

Hi I managed to get the playground to work with both Google and Github.

BTW I think you shouldn't use VITE_ env variables as these are exposed on the client. I converted to process.env. versions and it worked fine.

I was having trouble setting a custom session. The session callback isn't firing for me :

export const { get, post } = NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),

    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    })
   
  ],

  callbacks: {
    async jwt({token, account}) {

      if(!token.userid) {
         token.userid = Date.now().toString(16)
      } 
      console.log("jwt",{token, account}) // << does fire
      return token
    },
    async session({ session, token, user }) {
      console.log("session", {session, token , user}) // does not fire
      session.userid = token.userid
      return session;
    },
  },

[1finedev]

any hope for react native? i absolutely would love to have this integrated
Cheers

[SushritPasupuleti]

@boredland I understand your situation, I gave up a while ago on my approach too, it's just not working. I've already found out other ways to make Expo work in my case with Expo Auth and some extra code added on my Authentication service.

[boredland]

@boredland I understand your situation, I gave up a while ago on my approach too, it's just not working. I've already found out other ways to make Expo work in my case with Expo Auth and some extra code added on my Authentication service.

Care to share?

[1finedev]

I don't know where to go with that. All I came up with is not better then the two approaches out there, which both don't fully work. I guess I will move on to sth. different eventually. We could create an issue for this, so people can put a bounty on it, I certainly would put some money on it, as I feel that I already wasted a lot of time.

i certainly agree, if we could open a fresh issue on this, we could many others who might have a different approach, because it would be a game changer if we can implement this.

[SushritPasupuleti]

@boredland I understand your situation, I gave up a while ago on my approach too, it's just not working. I've already found out other ways to make Expo work in my case with Expo Auth and some extra code added on my Authentication service.

Care to share?

I just implemented regular Expo Auth and now have a separate service merge my Next Auth created accounts from my website and those created by Expo. It's not elegant but it works. I mean it defeats the purpose of using one solution.

[boredland]

I think I will give supabase auth a try. They have a nextjs adapter and there a working examples of it working well with expo.

[productdevbook]

it would be great to be able to use this project with Express. I wish the main core structure would change accordingly.

[wimsikal]

I'm getting an error when I run npm run build with svelte using vite 2.9.9. It works when I use npm run dev.

This is the error it gives me:

GithubProvider is not a function
    at file:///work/frontend/.svelte-kit/output/server/chunks/hooks-cff24dac.js:7:5
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async Server.respond (file:///work/frontend/.svelte-kit/output/server/index.js:2319:22)
    at async visit (file:///work/frontend/node_modules/@sveltejs/kit/dist/chunks/index2.js:1141:20)

It's complaining about the [...nextauth].ts file.

import NextAuth from "$lib"
import GithubProvider from "next-auth/providers/github"

export const { get, post } = NextAuth({
  providers: [
    GithubProvider({
      clientId: import.meta.env.VITE_GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
    }),
  ],
})

[wobsoriano]

Try this

import GithubProvider from "next-auth/providers/github"

export const { get, post } = NextAuth({
  providers: [
    GithubProvider.default({
      clientId: import.meta.env.VITE_GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
    }),
  ],
})

✔ Vite server built in 362ms                                                                                                     15:03:56
GithubProvider { default: [Function: GitHub] }

[schaschko]

With .default it works, but why?

The function is defined like this:

export default function Github<P extends GithubProfile>(
  options: OAuthUserConfig<P>
): OAuthConfig<P> { ... }

So the default export is a function?

But there is no property default. What magic is .default doing?

[zenflow]

What magic is .default doing?

Working around a bug in Vite. Not sure where the github issue is in that project. If anyone has it I'd like to follow it. /cc @wobsoriano ?

[lawrencecchen]

Got next-auth working with remix: https://gist.github.com/lawrencecchen/75fee3be74a8cc56aedae66b17d6d83c

Are you open to a PR to apps/example-remix? If so, should I open an issue first? Will create standalone after confirmation. @balazsorban44

[sondh0127]

We also have Nuxt and SvelteKit integrations ready 👊🏼

Is there any active PR for Nuxt 3 @wobsoriano. Thanks

[wobsoriano]

No active PR for Nuxt 3 yet @sondh0127 but there's a private repo

[r-modica-cti]

@wobsoriano is Nuxt3 integration usable?, we have a Nuxt3 app which badly needs a Auth story and with the lack of an official Nuxt Auth setup, the work you have done with Next Auth would potentially be an amazing fit.

[totalhack]

Is there a link to a working Nuxt 3 implementation?

[wobsoriano]

Is there a link to a working Nuxt 3 implementation?

https://github.com/nextauthjs/next-auth/tree/main/apps/playgrounds/nuxt

[intagaming]

I think I have found a way to get NextAuth working with Expo, so I'll leave a message here and hope that someone will be interested.

Proof of concept: https://github.com/intagaming/create-kaol-app. Here's how this works:

The login flow looks like so:

• On Next.js side, I have an endpoint that provides the information needed to construct the authorizationUrl on Expo. I call this the signin endpoint.
• On Expo, I initiate an Expo Authentication flow with the information above. The result is the state and code.
• I take the state and code above, plus additional things like code_verifier, and send it to Next.js. I call this the callback endpoint. I can't send to the /api/auth/callback directly because Expo can't set the Cookie header for the requests. So, this callback endpoint sends the things to /api/auth/callback and returns the sessionToken that was ripped out from the response Cookie header.
• I store the sessionToken in Expo's SecureStore.

A big twist is that I modified the next-auth/react module to support both web and native. You can find it in packages/app/utils/auth folder. On the Expo's side, the modified module uses the sessionToken from the SecureStore to do things that need it. It also needs csrfToken so I also fetch and store that. The fetchData function is modified to use Next.js as a proxy to talk to NextAuth (again, due to Expo's lack of Cookie manipulation).

To authorize normal Next.js requests, I pass the sessionToken in the Authorization header, then on Next.js side, it rips the sessionToken out of the Authorization header and transforms it into the NextAuth's SessionToken cookie, and put that cookie back into the request object. Now NextAuth can recogize the session via unstable_getServerSession. You can find this mechanism in packages/api/src/routers/context.ts.

I bet that it isn't the best-in-class approach yet, but if so, please let me know. Even better, if you want to improve on this, please do. Just remember to drop a link here so that everyone can collaborate ;)

I really want to push this into mainstream. Might seem impossible due to limitations, but I want to know the limitations, if any. If you need any information to elaborate on this, you can find me on Discord: An7#4498. Hope this helps someone, and I'm looking forward to seeing your collaborations ;)

Side note: Discord provider isn't working with PKCE right now, don't know why. GitHub PKCE works fine.

[intagaming]

The draft PR is here: #5240

[asuraphel]

@balazsorban44 thanks for SvelteKIt example. Can we use in it's current form? When will the standalone package be released? Thanks

[ChrisPlease]

Also interested in the Sveltekit stand alone package.

[Spikeysanju]

@balazsorban44 Any update on this?

[BracketJohn]

Hey 👋

Just chiming in to link https://github.com/sidebase/nuxt-auth - it's an attempt to bind together approaches from here and other places and also includes client side helpers to male it all work out nicely.

One issue we're facing with beta is the prerendered preact that's included + some necessary stuff not being exposed (ai think this is also linked in another issue here?)

Thanks for the great discussions in this thread so far, it really helped us to bring nuxt-auth out🙏

[asuraphel]

Congratulations. Waiting for official framework agnostic packages to use with SvelteKit. How did you get around necessary stuff not being exposed?

[BracketJohn]

I worked around it by:

• importing stuff that was actually importable by using deeper imports,
• rewriting code that I could not directly use

It was actually not necessary to do this very much. Have a look at the source code yourself:

• api: https://github.com/sidebase/nuxt-auth/blob/main/server/api/auth.ts
• client: https://github.com/sidebase/nuxt-auth/blob/main/src/runtime/composables/useSession.ts

I think the biggest drawback of this solution is, that it pulls in preact to get the unstyled webpages (eg /sigin). It would be nice if nextauth would allow removing this per default (and maybe, there is a way, I have bot looked into it yet).

We're going to figure thst out though and then nuxt-auth will habe the best of both worlds (:

[asuraphel]

Nice. I hope the framework agnostic version happens soon. That way all the JS frameworks won't have to start from scratch when implementing auth which is an essential thing. BTW why does Next Auth use preact when it's make for Next which is a React framework.

[jerriclynsjohn]

I guess low footprint. Really excited to see this come together for sveltekit

[asuraphel]

I guess low footprint. Really excited to see this come together for sveltekit

Not yet waiting for it to happen. Not sure if there is a timeline.

[balazsorban44]

Some exciting news! We just shipped @auth/core, and NextAuth.js is becoming Auth.js.

See more info here: https://twitter.com/balazsorban44/status/1603082914362986496

[unsalkorkmaz]

Anyone created Vue version?
There is a try above but sadly it's deleted and was from 2021.

[wobsoriano]

https://github.com/nextauthjs/next-auth/tree/main/apps/playgrounds/nuxt

[zenflow]

If you're looking for Nuxt (3) integration - https://github.com/sidebase/nuxt-auth/
If you're looking for Vue integration - Vue has no backend so it's up to you to integrate with your Express (or other framework) backend .. and for Vue frontend, I'm not aware of any integration but you can always use backend directly

[yourcodesnotworking]

That's a good ambition, but your code just doesn't work from the beginning with get started code example.😂

[reactastro]

Has there been any work done to make next-auth usable with the astro framework?

[kdawgwilk]

I was working on a PR to add SMS passwordless auth with Twilio similar to how we have passwordless with nodemailer and I noticed a lot of code duplication across the core lib and next-auth should I be adding new code to both places or can I just add it to core and re-export from next-auth?

[david1542]

Hi, is there anybody here that made it work in pure react.js (SPA)? I'm currently using Auth0 and I'm thinking about switching to auth.js.