Login from other nextjs site using SSO

[andrewscofield]

Your question
Is it possible to login using SSO?

What are you trying to do
I have a few websites that have accounts and I'd like to centralize all my accounts to one. So a new app specifically for mananage account and profile data and the other sites will use that same login session. Best example I can think of is Envato:

https://account.envato.com/ (centralized account page)

https://themeforest.net/ (if you are logged in to your envato account and sign in you are automatically signed in)

It looks like they are using JWT but I don't know if this is possible with NextAuth or if there are any examples out there of other people doing something similar. I did find this, which looks like it could work for logging in remotely via user/pass:

https://next-auth.js.org/configuration/pages#credentials-sign-in

Anybody done anything like that?

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[itxtoledo]

I'm trying to implement this but my sites are in subdomains of the main site, I believe that this way I can redirect the login to the main site and all subdomains will have access to the cookie

[andrewscofield]

Yea I think it might be easier with subdomain, but like I gave as an example, envato does with different domains.

[itxtoledo]

let's think about how to solve this, I would like to do something like it works on google services, you log into google and when you enter youtube you are already logged in

[andrewscofield]

Well, I know how Envato does this, they use JWT. When I'm on themeforest.net and I sign in using my user/pass are sent to an API on account.envato.com and I gets me a token that I can use to request a JWT token. The JWT token is then sent to the user API in point on themeforest.net which generates a sessions with that domain.

So technically you aren't actually logging in with themeforest.net, but are granted a token to create a temporary and revocable session with themeforest.net from account.evato.com

My question is... how do we make this work with next-auth 😂

[andrewscofield]

https://arunoda.me/blog/add-auth-support-to-a-next-js-app-with-a-custom-backend

I think this article I found on the nextauth tutorial page is close to what I'm wanting, but not really a full example

[itxtoledo]

in the next few days i will try to implement this on my sites, i will keep you informed of how i will do

[dcantatore]

@itxtoledo Any luck?

[itxtoledo]

@dcantatore I gave up using this package and did everything by hand, this package does not allow you to use your own server to sign the jwt token

[andrewscofield]

@dcantatore Same here, I gave up on trying to get it to work. I did end up finding some ways around it but kept running into new issues. The nail in the coffin was reading this: https://next-auth.js.org/faq#does-nextauthjs-support-signing-in-with-a-username-and-password

I don't necessarily disagree with this, but it's clear this is probably the wrong package for this particular project I'm working on.

That said, I do plan on using this for future projects, I just have a requirement on this one project where the login server needs to be external for use on multiple sites and needs to be user/password.

[iaincollins]

Hi there!

@dcantatore I gave up using this package and did everything by hand, this package does not allow you to use your own server to sign the jwt token

You can absolutely use your own token with NextAuth.js as per the example code in the JSON Web Token option.

You can tell it to work with a token that is encrypted / signed / encoded / compressed anyway you like.

The functions you can use to define how a cookie should be encoded and decoded are named encode and decode:

jwt: {
  // You can define your own encode/decode functions for signing and encryption
  // if you want to override the default behaviour.
  // async encode({ secret, token, maxAge }) { /* input is token object; should return an encoded string */ },
  // async decode({ secret, token, maxAge }) { /* input is encoded string; should return object */ },
}

The iat and exp values in a token should be present as claims. They will be updated automatically to rotate the token. If you don't want that you can set session max age (default 30 days) and session update (default 24 hours) to values in the far future.

[iaincollins]

@dcantatore Same here, I gave up on trying to get it to work. I did end up finding some ways around it but kept running into new issues. The nail in the coffin was reading this: https://next-auth.js.org/faq#does-nextauthjs-support-signing-in-with-a-username-and-password

I don't necessarily disagree with this, but it's clear this is probably the wrong package for this particular project I'm working on.

That said, I do plan on using this for future projects, I just have a requirement on this one project where the login server needs to be external for use on multiple sites and needs to be user/password.

You can use just about any existing username/pasword service with the authorize() callback - such as an Oracle DB, LDAP instances, Active Directory, PAM, NIS, SOAP, etc - usually in about 5-10 lines of code.

This is different to consuming a JSON Web Token that has been set somewhere else though.

(Though you could do both!)

[andrewscofield]

Yes, I got all of that working quite well. It was very flexible and pretty easy to create my own provider with JWT and I was using credentials on my custom database. Worked great for the primary accounts app I was building. I ran into issues and got stuck trying to allow my clients' other sites to be able to easily login from a totally separate nextjs project. I'm looking at Envato as an example of how it's done and in very simple terms I was not able to replicate this or something similar.

I poked around the issues here for a bit and there are people trying to do similar things, like login from a mobile app or secondary web app, with some successful workarounds. I was just never able to get there and ran out of time.

[stale]

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!

[stale]

Hi there! It looks like this issue hasn't had any activity for a while. To keep things tidy, I am going to close this issue for now. If you think your issue is still relevant, just leave a comment and I will reopen it. (Read more at #912) Thanks!

[subhendukundu]

A quick question on this,
Let's say I have an auth system running with nextjs app. Can I use the same APIs in other apps just as create-react-app? If so, is there an example I could follow?
I have tried to use the APIs http://localhost:4000/api/auth/signin/google? which is my Nextapp (running on docker) and returning [signin data] {url: "http://localhost:3000/api/auth/signin?csrf=true"} which not available as its a cra and ended up with 500 Internal Server Error.

Also when Nextjs is deployed with docker with docker run -p 4000:3000 hasura-next-auth a different port, it does not work either. Can I do anything about that?

[Uranbold]

Hi guys.

Did you guys resolve this issue? I wanna use SSO on next-auth but it seems Custom Provider is not a solution for SSO.

Thanks.

[wiredmatt]

Could anyone advance with this? I need to provide sessions for multiple next.js apps using SSO. The credentials one works fine but how to achieve the same using OAuth providers?

[MartinDawson]

@Uranbold
@system32uwu

https://next-auth.js.org/configuration/providers/oauth#using-a-custom-provider

[wiredmatt]

@MartinDawson thanks for linking that, now I think I understand what should be done, we should overwrite the default strategy to set the cookie for all subdomains, is that right? I see an example here. Would be great to have a boilerplate with this setup, I've moved on to React + express for the project that I'm working on but for future projects having this working would be great

[wiredmatt]

@geniusit I was wondering the same, I guess you can use the state option and set it to a JSON object like this:

{
  "origin": "https://admin.somedomain.com"
}

and then use that to redirect on successful login

I'm doing so in my express up like this, you should be able to do the same:

const authRouter = Router()

authRouter.get('/connect/:provider', (req, res, next) => {
  let scope: string[] = []

  switch (req.params.provider) {
    case 'google':
      scope = ['profile', 'email']
      break
    case 'discord':
      scope = ['identify', 'email']
      break
  }

  return passport[req.user ? 'authenticate' : 'authorize'](
    req.params.provider,
    {
      state: JSON.stringify({ origin: req.origin }),
      scope,
      passReqToCallback: true
    }
  )(req, res, next)
})

authRouter.get(
  '/connect/:provider/callback',
  (req, res, next) => {
    passport.authenticate(req.params.provider, {
      failureRedirect:
        JSON.parse(req.query.state as string)?.origin ||
        req.origin,
      successRedirect:
        JSON.parse(req.query.state as string)?.origin ||
        req.origin
    })(req, res, next)
  }
)