Nextjs-auth0: Allow for server-side operations on authentication callback

Created on 26 Feb 2020  路  7Comments  路  Source: auth0/nextjs-auth0

We'd trying out this library to add authentication to a new Next.js project. Everything seems to work nicely, however I think the callback handler can be improved.

When a user signs-up, and is redirected to /api/callback for the callbackHandler to perform the code exchange with Auth0, I would like to perform some operations on our database before the user is redirected back to the application homepage.

This doesn't seem possible right now. In an ideal world, I'd be able to do something along these lines:

import auth0 from '../../lib/auth0';
import User from '../entities/User';

export default async function callback(req, res) {
  try {
    const { user } = await auth0.exchangeCode(req)
    await User.createFromAuth0(user);
    auth0.redirect(res, { redirectTo: '/' });
  } catch (error) {
    console.error(error)
    res.status(error.status || 500).end(error.message)
  }
}

Is that something which you are planning to add, or is it something I can contribute to?

Thanks,

Matt

Most helpful comment

Added as part of v0.12.0

You can now inject logic right before the session is created. It can be used to control what goes in the session, call your own backend (eg: to provision a user), prevent the user from signing in, ...

export default async function callback(req, res) {
  try {
    await auth0.handleCallback(req, res, {
      onUserLoaded: async (req, res, session, state) => {
        await User.createFromAuth0(user);
        return session;
      }
    });
  } catch (error) {
    console.error(error);
    res.status(error.status || 400).end(error.message);
  }
}

All 7 comments

@matthieualouis the redirecting is baked into the handleCallback method (See the source).

What you could try (might not be the nicest thing though), is set the redirectTo to a different api route and then fetch the current user and perform your database operations.

Another option is looking into Auth0 hooks.

I'm agree with @matthieualouis request. I thought it'd be good if handleCallback could return session.user directly or take a callback function.

Because, as the auth0 doc specifies, I had to synchronize - after each logins - user data in my own database.

For example, you could have a Users table that lists each user authenticated by Auth0. Every time a users logs in, you could search the table for that user. If the user does not exist, you would create a new record. If they do exist, you would update all fields, essentially keeping a local copy of all user data.

https://auth0.com/docs/users/normalized/auth0/store-user-data

@HurricaneInteractive Auth0 hooks, seems to be a sad solution since with that we can't deploy feature branches, staging and production environnement with differents databases

I did what @HurricaneInteractive suggested with overriding the redirectTo with _another_ callback page that handles the sync with our backend, then performs the intended original redirect. It works.

I've had to do hacky solutions to get around the redirects in handleLogout and handleProfile as well 馃槦

I do think there'd be value in being able to call _most_ of the methods here without implicit redirects. The only way to use this effectively creates a relatively hacky set of local endpoints...

Added as part of v0.12.0

You can now inject logic right before the session is created. It can be used to control what goes in the session, call your own backend (eg: to provision a user), prevent the user from signing in, ...

export default async function callback(req, res) {
  try {
    await auth0.handleCallback(req, res, {
      onUserLoaded: async (req, res, session, state) => {
        await User.createFromAuth0(user);
        return session;
      }
    });
  } catch (error) {
    console.error(error);
    res.status(error.status || 400).end(error.message);
  }
}

@sandrinodimattia is there a plan to add similar apis to the other handlers? Seems like a some of the other ones could benefit from this flexibility as well.

Feel free to open separate issues if you have additional use cases.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aorsten picture aorsten  路  6Comments

jvorcak picture jvorcak  路  4Comments

shicholas picture shicholas  路  5Comments

ichtestemalwieder picture ichtestemalwieder  路  3Comments

RyanPayso13 picture RyanPayso13  路  4Comments