Next-auth: What is the best way to have same authentication on all subdomains?

Created on 7 Jul 2020  路  5Comments  路  Source: nextauthjs/next-auth

Your question
Is there a way and what's the best approach to have same authentication on subdomains as well as on main domain?

What are you trying to do
Suppose, I have a website, which has some subprojects on various subdomains and I'd love to have cross-domain authentication.

domain.com 鈥斅爉y main website build on Next.js
app.domain.com 鈥斅爏ome kind of app
app2.domain.com 鈥斅爏ome other app

Some of these apps might be same Next.js app, other might be separate Next.js app.

I'd love to have same authentication for these app. So user can log in on one of these sites and become logged in on all others. Same with logout and session handling.

Can it be done with next-auth? How? What would be the best approach?

Documentation feedback

  • [ ] Found the documentation helpful
  • [ ] Found documentation but was incomplete
  • [x] Could not find relevant documentation
  • [ ] Found the example project helpful
  • [x] Did not find the example project helpful
question

Most helpful comment

@iaincollins would you accept a PR to make this a flag in the options? It's a lot of work to go through for something which I think many people will want.

Hey I would love a an option to set this that would then get applied to all relevant cookies set by NextAuth.js. I've been thinking about the best way for this to work.

e.g.

  1. Have people (optionally) be able to setcookies: { domain: "example.com" } or cookies: { domain: ".example.com" }
  2. Have it be a boolean option like cookies: { subdomains: true }

For context, I've also been thinking about adding support for cross-domain silent login in the longer term.

That might as a top level option like domains: [ "example.com", "example.org" ].

I've been pondering the simplest way for these options to exist to help folks avoid confusion.

If it's more like option 2. then maybe it should be a top level option and not nested inside cookies, to make it easier to find, understand and set. (e.g. just subdomains: true)

All 5 comments

This a really great question! Right now, the only way to do this would be to set a custom cookie policy.

e.g. You should be able to set a 'domain' option on the 'sessionToken' cookie.

However, that should work as long as they sign in on domain.com - as you can only set cookies that work across subdomains from an apex domain (not another subdomain).

_Note: This is a little awkward as you will likely want different different cookie policies in development and live - unless you are also running HTTPS in development. If using the default policy NextAuth.js does this automatically, but if you are using a custom policy you will have to handle this yourself._

We could always provide a configuration option to make this as simple as passing an option in NextAuth.js.

We could always provide a configuration option to make this as simple as passing an option in NextAuth.js.

I already have an API server which I want to make accessible at api.domain.com and it would be great to have this option in NextAuth! Meanwhile I am trying to understand how exactly to achieve it using the options you've quoted above.

That said, @iaincollins thanks for such a fantastic library! I am moving my UI from CRA to Next JS and it was such a smooth experience to integrate Next Auth into the new application UI. What earlier tooks me 2 days was done in a matter of half an hour. And the documentation is very clean and clear too!

Hi @iaincollins,

could you please provide the exact setting that @neoromantic would need? We have a very similar setup and usecase.

I've implemented this with the following and it seems to work:

const useSecureCookies = process.env.NEXTAUTH_URL.startsWith('https://')
const cookiePrefix = useSecureCookies ? '__Secure-' : ''
const hostName = Url(process.env.NEXTAUTH_URL).hostname
const options = {
  cookies: {
    sessionToken: 
    {
      name: `${cookiePrefix}next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: useSecureCookies,
        domain: hostName == 'localhost' ? hostName : '.' + hostName // add a . in front so that subdomains are included
      }
    },
  },
}
export default (req, res) => NextAuth(req, res, options)

Basically it's a bunch of code to add a . in front of the domain.

@iaincollins would you accept a PR to make this a flag in the options? It's a lot of work to go through for something which I think many people will want.

@iaincollins would you accept a PR to make this a flag in the options? It's a lot of work to go through for something which I think many people will want.

Hey I would love a an option to set this that would then get applied to all relevant cookies set by NextAuth.js. I've been thinking about the best way for this to work.

e.g.

  1. Have people (optionally) be able to setcookies: { domain: "example.com" } or cookies: { domain: ".example.com" }
  2. Have it be a boolean option like cookies: { subdomains: true }

For context, I've also been thinking about adding support for cross-domain silent login in the longer term.

That might as a top level option like domains: [ "example.com", "example.org" ].

I've been pondering the simplest way for these options to exist to help folks avoid confusion.

If it's more like option 2. then maybe it should be a top level option and not nested inside cookies, to make it easier to find, understand and set. (e.g. just subdomains: true)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

eatrocks picture eatrocks  路  3Comments

simonbbyrne picture simonbbyrne  路  3Comments

MelMacaluso picture MelMacaluso  路  3Comments

jimmiejackson414 picture jimmiejackson414  路  3Comments

dmi3y picture dmi3y  路  3Comments