Nuxt.js loginWith Auth0 delayed redirect

user_2288838 0
Viewed 237

I have the following setup with Auth0 & Nuxt.js. Somehow after loginWith, the page still continues to render for a brief moment before redirecting to Auth0's login page. The promise returned from loginWith is undefined, which makes blocking on it impossible. Is there a way to immediately proceed with Auth0 login without rendering the page first?

if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
}
const user = this.$auth.user;
// Operations using user information below //
nuxt.js vue.js
2 Answers

First of all you should not block rendering until some asynchronous operation complete. Basically the async call to a function decorated with "await" is required to let the UI thread to do its job. Instead of blocking rendering you should display some useful information for the user, at least some message that describes the process being performed: "Authorizing..." or something like this.

To resolve you problem you can declare some boolean variable in your component (or in your vuex store) that is set to false until user is authorized. By checking this value in your html template you can prevent showing page content until browser is redirected to auth page.

data() {
  return {
    isAuthorized: false;
  }
}

// your code
if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
} else {
  this.isAuthorized = true;
}

// process user information
user_153346190

The 'await this.$auth.loginWith("auth0");' is causing the breif moment of delay. This is the time required to verify if the current session is active. This can be handled by adding something like a loading page.

showLoadingPage(); // display a fullscreen loading animation or text
if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
}
hideLoadingPage(); // hide the loading animation after the await completes

const user = this.$auth.user;
// Operations using user information below //
user_52778630
Related