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

[brillout]

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)

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