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

brillout · 2021-07-01T16:55:51Z

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

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!

The text was updated successfully, but these errors were encountered:

balazsorban44 · 2021-07-01T17:17:56Z

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 · 2021-07-29T11:12:41Z

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 · 2021-07-29T13:24:32Z

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 · 2021-07-29T13:47:06Z

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 · 2021-07-29T15:22:07Z

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 · 2021-07-29T16:26:51Z

👌.

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 · 2021-07-30T17:20:58Z

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 · 2021-07-30T20:32:01Z

@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 · 2021-07-30T20:32:18Z

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 · 2021-07-31T10:01:00Z

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 · 2021-08-02T06:21:07Z

@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 · 2021-08-03T05:15:45Z

@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 · 2021-08-03T07:27:52Z

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 · 2021-08-03T09:39:07Z

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 · 2021-08-03T09:44:59Z

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

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

Thoughts?

simplenotezy · 2021-09-07T13:45:08Z

Pretty neat - looking to integrate Next-auth into an Express API, so would be happy to test this out and deliver feedback

wobsoriano · 2021-09-07T13:49:19Z

I think we can start adding integrations for vue/svelte in the beta branch

balazsorban44 · 2021-09-07T13:54:08Z

I kindly ask anyone wanting to work on this to wait until v4 is released as stable! I have many ideas and future improvements planned, but v4 beta should be considered as a feature freeze, and no additional changes should be made apart from bug fixes. Keep an eye on the releases.

That said, you can definitely start looking into this, but I cannot provide feedback until v4 is ready.

brillout · 2021-09-07T13:58:39Z

👍 Is there an ETA for v4?

balazsorban44 · 2021-09-07T14:06:21Z

It is currently in beta. The more people check it out/give feedback on what is missing/failing, the faster it will be to release it to stable.

I have never worked on anything of this scale, and the responsibility is huge, so I want to make it right.

brillout · 2021-09-07T14:10:38Z

check it out/give feedback

I will.

brillout · 2021-09-24T06:33:49Z

The more people check it out/give feedback on what is missing/failing

Are there some docs about extending NextAuth to add support for Vie, Vue, etc.?

balazsorban44 · 2021-09-24T07:31:39Z

No, not that I'm aware of. Not sure where it could fit nicely, but feel free to open a PR on https://github.com/nextauthjs/docs

wobsoriano · 2021-10-13T09:18:32Z

is it possible to export client utils?

import {
    BroadcastChannel,
    CtxOrReq,
    apiBaseUrl,
    fetchData,
    now,
    NextAuthClientConfig,
} from './client'

balazsorban44 · 2021-10-13T09:37:02Z

Yes, it is. Although CtxOrReq for example might become obsolete. We kind of try to separate getSession from getServerSession and the same goes for methods like getCsrfToken. It is more specific to #1535 but just a heads up.

I'll export them on the PR, but maybe under something like next-auth/client/_utils to signal that it's not intended for direct use, only by wrappers like what you are making. Also next-auth/client has been a thing in v3 and I want to avoid confusion.

UPDATE: Newest version on the PR should have an export at next-auth/client/_utils now. Just a note, the things exported might not be that relevant for other frameworks, or they would look different.

wobsoriano · 2021-10-13T17:56:13Z

Nuxt 3 POC https://gist.github.com/wobsoriano/0f14bc83ad4b3e296a7e8d7d69aa55c1

balazsorban44 · 2021-10-13T18:12:55Z

That is really cool! 👏 I wonder if there is anything I should do/expose for this to be a viable base to build on top of. I would like to get the PR reviewed so we can get closer to a v4 stable release.

It looks like you already have a working Nuxt & SvelteKit POC, which is awesome 😅

Svelte and Vue clients could follow. In short, a client in next-auth is a list of methods that communicate with the backend REST API. The most important functionality is

a session cache that can re-fetch the session in intervals to avoid stale data
synced session state between tabs
signIn method to start the sign-in process directly to a provider, or redirect to the sign-in page
signOut empties the cache

Docs here:

wobsoriano · 2021-10-13T18:20:46Z

That is really cool! 👏 I wonder if there is anything I should do/expose for this to be a viable start to work on top of. I would like to get the PR reviewed so we can get closer to a v4 stable release.

It looks like you already have a working Nuxt & SvelteKit POC, which is awesome 😅

I think these functions can be used by Vue/Svelte (except useSession)

balazsorban44 · 2021-10-13T18:22:22Z

And probably SessionProvider neither. I think we should create standalone clients anyway, in case something changes in Svelte or Vue in the future. I might also want to refactor the React client without worrying about crashing anything in other libraries.

Do you want me to do anything more on the PR?

wobsoriano · 2021-10-13T18:23:47Z

And probably SessionProvider neither. I think we should create standalone clients anyway, in case something changes in Svelte or Vue in the future. I might also want to refactor the React client without worrying about crashing anything in other libraries.

Do you want me to do anything more on the PR?

all good for now :D

brillout · 2021-12-13T07:17:26Z

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep it open. (Read more at #912) Thanks!

I think it's still relevant :-)

balazsorban44 · 2021-12-13T10:52:24Z

It is. I'm taking a small break from the project (low maintenance is still provided) for the holidays, and to be able to better focus on my new job. Will come back the next year.

Cheers 🍻

brillout · 2021-12-13T11:14:56Z

That's actually good timing as we'll be able to show you the Vike + NextAuth integration next year :-).

Happy holidays 🎄.

dohomi · 2022-01-18T02:52:05Z

I am using NextJS for the production app and Storybook for the UI testing solution and UI regression testing.

Is it possible to use NextAuth currently already with v4 and Storybook? I couldn't find any pointers so far.

balazsorban44 · 2022-02-05T00:46:47Z

Small update here, we are in the works to convert this repo to a monorepo that will contain all the projects like adapters, docs, and examples, with the core itself. this will open up for creating new packages for different frameworks. Once we are satisfied with the monorepo setup (#3650) we can get around this issue much more easily!

brillout added the enhancement New feature or request label Jul 1, 2021

balazsorban44 mentioned this issue Jul 11, 2021

Is this usable with a normal React app? #2351

Closed

balazsorban44 mentioned this issue Jul 19, 2021

How to use next-auth api endpoints (signin/signout) from a mobile app #1110

Closed

5 tasks

brillout mentioned this issue Jul 29, 2021

Svelte Support #2190

Closed

balazsorban44 mentioned this issue Aug 2, 2021

React Native Support? #2477

Closed

balazsorban44 mentioned this issue Aug 10, 2021

docs(providers): add tip about async provider code #2443

Merged

2 tasks

balazsorban44 mentioned this issue Aug 19, 2021

Providers Without API Routes? #2558

Closed

balazsorban44 changed the title ~~Make next-auth frameworkagnostic (Vite, Vue, Express...)~~ Make next-auth framework agnostic (Vite, Vue, Express...) Oct 12, 2021

balazsorban44 mentioned this issue Oct 12, 2021

Usage with react native #569

Closed

5 tasks

balazsorban44 pinned this issue Oct 12, 2021

brillout mentioned this issue Oct 13, 2021

Authentication cyco130/create-vike#3

Open

balazsorban44 mentioned this issue Oct 17, 2021

Navigating to custom sign in page using signIn() replaces history. Is there a way to configure that or is this a bug? #2676

Closed

edgarasben mentioned this issue Oct 29, 2021

[Introspection] Cross Schema Foreign Keys prisma/prisma#1175

Closed

This was referenced Nov 8, 2021

Can getSession pass the context's authorization header to the session fetch? #3151

Closed

Sign in directly to provider seems to fallback to default signin page #1582

Closed

stale bot added the stale Did not receive any activity for 60 days label Dec 13, 2021

stale bot removed the stale Did not receive any activity for 60 days label Dec 13, 2021

nextauthjs deleted a comment from stale bot Dec 15, 2021

balazsorban44 mentioned this issue Dec 19, 2021

feat(oauth): Improve support for non-web clients such as react native #3474

Closed

3 tasks

balazsorban44 mentioned this issue Dec 30, 2021

NextAuth Ionic #3539

Closed

balazsorban44 mentioned this issue Jan 17, 2022

Move all NextAuth.js projects into a monorepo #3650

Closed

balazsorban44 mentioned this issue Feb 7, 2022

docs: add Gatsby example, move Next.js example #3872

Merged

3 tasks

nextauthjs locked and limited conversation to collaborators Feb 12, 2022

balazsorban44 converted this issue into discussion #3942 Feb 12, 2022

balazsorban44 unpinned this issue Dec 14, 2022

This issue was moved to a discussion.

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

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

Comments

brillout commented Jul 1, 2021 • edited by balazsorban44 Loading

balazsorban44 commented Jul 1, 2021 • edited Loading

brillout commented Jul 29, 2021

balazsorban44 commented Jul 29, 2021

brillout commented Jul 29, 2021

balazsorban44 commented Jul 29, 2021

brillout commented Jul 29, 2021

wobsoriano commented Jul 30, 2021

brillout commented Jul 30, 2021

balazsorban44 commented Jul 30, 2021

wobsoriano commented Jul 31, 2021 • edited Loading

brillout commented Aug 2, 2021

wobsoriano commented Aug 3, 2021

brillout commented Aug 3, 2021

wobsoriano commented Aug 3, 2021

brillout commented Aug 3, 2021

simplenotezy commented Sep 7, 2021

wobsoriano commented Sep 7, 2021

balazsorban44 commented Sep 7, 2021 • edited Loading

brillout commented Sep 7, 2021

balazsorban44 commented Sep 7, 2021

brillout commented Sep 7, 2021

brillout commented Sep 24, 2021

balazsorban44 commented Sep 24, 2021

wobsoriano commented Oct 13, 2021

balazsorban44 commented Oct 13, 2021 • edited Loading

wobsoriano commented Oct 13, 2021

balazsorban44 commented Oct 13, 2021 • edited Loading

wobsoriano commented Oct 13, 2021 • edited Loading

balazsorban44 commented Oct 13, 2021 • edited Loading

wobsoriano commented Oct 13, 2021

brillout commented Dec 13, 2021

balazsorban44 commented Dec 13, 2021

brillout commented Dec 13, 2021 • edited by balazsorban44 Loading

dohomi commented Jan 18, 2022

balazsorban44 commented Feb 5, 2022 • edited Loading

This issue was moved to a discussion.

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

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

brillout commented Jul 1, 2021 •

edited by balazsorban44

Loading

balazsorban44 commented Jul 1, 2021 •

edited

Loading

wobsoriano commented Jul 31, 2021 •

edited

Loading

balazsorban44 commented Sep 7, 2021 •

edited

Loading

balazsorban44 commented Oct 13, 2021 •

edited

Loading

balazsorban44 commented Oct 13, 2021 •

edited

Loading

wobsoriano commented Oct 13, 2021 •

edited

Loading

balazsorban44 commented Oct 13, 2021 •

edited

Loading

brillout commented Dec 13, 2021 •

edited by balazsorban44

Loading

balazsorban44 commented Feb 5, 2022 •

edited

Loading