How to implement embedded passwordless sign in in Next.js

Help
,
1

Ready to post? :mag: First, try searching for your answer.
Hi everyone,

I have a Next.js application set up with “@auth0/nextjs-auth0”. I’d like to implement a passwordless signin with OTP with a custom UI. The reason being we want the signin process to be a popup modal, instead of redirecting users to the universal login page.

I have managed to call “/passwordless/start” and “/oauth/token” endpoints (doc) to obtain a response that look like this:

{
  "access_token": "...",
  "id_token": "...",
  "scope": "openid profile email address phone",
  "expires_in": 86400,
  "token_type": "Bearer"
}

And also decode the response with some custom TypeScript code:

export const getSessionPayload = (
    { access_token, expires_in, id_token, scope }: LoginResult,
    email: string,
) => {
    const secret = process.env.AUTH0_SECRET;
    if (secret === undefined) {
        throw new Error('AUTH0_SECRET env variable secret not set');
    }

    const { nickname, name, picture, updated_at, email_verified, sub } =
        decodeJwt(id_token); // from the "jose" library

    return {
        secret,
        user: {
            nickname,
            name,
            picture,
            updated_at,
            email_verified,
            sub,
            email,
        },
        idToken: id_token,
        accessToken: access_token,
        accessTokenScope: scope,
        accessTokenExpiresAt: Date.now() + expires_in,
        createdAt: Date.now(),
    };
};

My question is what do I do with this next? How do I store what I have in a my application’s session? Or is there an easier way to make use of “@auth0/nextjs-auth0” to do so?