Migrating to Universal Login from Lock

Get Help
, , ,
1

Hi!!
So we were using the Lock authentication without problems for a couple of months but now we want to use the mobile version and decided the best bet was to migrate to Universal Login. We are using auth0-hooks and can successfully create new users. However, we are not able to handle user data correctly after log in.
We read this issue

and the documentation but I can’t find the complete guide on what we should do with these variables:
this.lock = new Auth0Lock(props.clientId, props.domain, props.options);
this.tokenRenewalTimeout = null;
this.state = {
lock: this.lock,
login: this.login,
logout: this.logout,
isAuth: false
};
}

3

Hi @ruben1,

Welcome to the Community!

Just to make sure I understand what you are looking to do, are you planning to migrate from an embedded login to Universal Login? Or are you migrating from the Classic Universal Login Experience to the New Universal Login Experience?

4

Hi! Yes, I want to migrate from embedded login to Universal Login. We had to change it to Universal since the embedded one wasn’t working on some mobile devices. I am using Next js and auth0-react-hooks. The log in and sign up are done correctly but we are unable to get the access token afterwards and use the session info.It seemed to be an easy process but it’s much harder than we thought. I found this previous issue that seemed to indicate we had to change the authlocks with webAuth.

5

I see! a new SDK was just released a couple of weeks abo specifically for Next.js. I’d suggest taking a look at the Next.js Quickstart if you haven’t already: Auth0 Next.js SDK Quickstarts: Login

There is an example in the quickstart of retrieving an Access Token

import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function shows(req, res) {
  try {
    const { accessToken } = await getAccessToken(req, res, {
      scopes: ['read:shows']
    });
    const apiPort = process.env.API_PORT || 3001;
    const response = await fetch(`http://localhost:${apiPort}/api/shows`, {
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    });
    const shows = await response.json();

    res.status(200).json(shows);
  } catch (error) {
    res.status(error.status || 500).json({ error: error.message });
  }
});
1 Like
6

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