How to create Auth0 session cookie programatically within SSR Next JS using nextjs-auth0?

Help
1

I want to create a no-friction signup experience for users. I want the flow to look like (all actions are carried out using SSR):

  1. User supplies email, clicks signup button.
  2. Auth0 API is used to create a user with random password. Password is forgotten after this step.
  3. Resource owner password flow is used to retrieve id and access tokens.
  4. Tokens are used to create Auth0 cookie(s), this is returned to user and user is now logged in. (I believe if the cookie is > 4kB then it is split).
  5. Subsequent requests from client (whether SSR or client-side) are from a logged in user (albeit the user has not yet validated their email address).

The user still needs to verify their email, but otherwise is able to interact with the system without having to first verify their email.

I have got 1-3 working but I am not sure how to do (4). Is there an example of using nextjs-auth0 (perhaps within here? nextjs-auth0/src/auth0-session at main · auth0/nextjs-auth0 · GitHub) to create a cookie that will be recognised by auth0?

2

*amend to flow above to fix typo: the random user password is forgotten after being used to retrieve tokens for the user within step (3), not step(2) as written above.

3

For anyone coming to this later, I actually got a very basic version to work just like this inside an API route:

    import {getConfig} from "@auth0/nextjs-auth0/dist/config";  
    import {CookieStore} from "@auth0/nextjs-auth0/dist/auth0-session"; 
    import {SessionCache} from "@auth0/nextjs-auth0";
    import {TokenSet} from "openid-client";

export default async function handler(req, res) {
    console.log('inside api method');
    const { baseConfig, nextConfig } = getConfig();
    const cookieStore = new CookieStore(baseConfig);
    const sessionCache = new SessionCache(baseConfig, cookieStore);

        await fetch('https://MYAPI.us.auth0.com/oauth/token', {
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            redirect: 'follow',
            referrerPolicy: 'no-referrer',
            body: new URLSearchParams({
                grant_type: 'password',
                username: 'myusername',
                password: 'mypassword',
                audience: 'https://<MY API>.us.auth0.com/api/v2/',
                scope: 'openid profile email',
                client_id: 'xxx',
                client_secret: 'xxx'
            })
        }).then(function (response) {
            return response.json();
        }).then((json) => {
                const session = sessionCache.fromTokenSet(new TokenSet(json));
                sessionCache.create(req, res, session);

                res.writeHead(302 , {
                    'Location' : '/some/redirect/url'
                });
                res.end();

            }
        )
            .catch(function (error) {
                res.writeHead(404 , {
                    'Location' : '/404' 
                });
                res.end();
            });
}
1 Like
4

Were you able to solve that @auth0/nextjs-auth0 does not export these out from the package?

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.