Lock not redirecting, just keeps spinning after login

[clintpck]

Hi Everyone,

I’ve been experiencing problems with my authjs Lock in that it is not not redirecting. It just keeps spinning after login and displays “Login to {My Accountname}”. Has anybody else experinced this?

Regards
Clint

[James.Morrison]

Hey there @clintpck! I would be happy in any way I can but I need a little more information on what’s going on. Are you seeing any errors in the console or in logs? Did it work previously? Is it exhibiting the same error in all browsers or one specifically? Thanks in advance!

[clintpck]

Thanks James. Unfortunately I see no errors in the console apart from 404 errors for the gravatar lookup. The auth0 logs also show no errors. I’ve tested it in chrome and safari so far and it seems to exhibit the same behaviour in both browsers. It was working before, and when I tried logging into the application again this week, this problem reared its head.

My AuthService looks as follows:

@Injectable()
export class AuthService {
  //Create Auth0 web auth instance
  auth0 = new auth0.WebAuth({
    clientID: AUTH_CONFIG.CLIENT_ID,
    domain: AUTH_CONFIG.CLIENT_DOMAIN,
    responseType: 'token id_token',
    redirectUri: AUTH_CONFIG.REDIRECT,
    audience: AUTH_CONFIG.AUDIENCE,
    scope: AUTH_CONFIG.SCOPE
  });

  userProfile: any;

  // Create a stream of logged in status to communicate throughout app
  loggedIn: boolean;
  loggedIn$ = new BehaviorSubject<boolean>(this.loggedIn);

  constructor(private router: Router) {
    // If authenticated, set local profile property and update login status subject
    // If token is expired, log out to clear any data from localStorage
    if (this.authenticated) {
      this.userProfile = JSON.parse(localStorage.getItem('profile'));
      this.setLoggedIn(true);
    } else {
      this.logout();
    }
  }

  setLoggedIn(value: boolean) {
    // Update login status subject
    this.loggedIn$.next(value);
    this.loggedIn = value;
  }

  login() {
    // Auth0 authorize request
    this.auth0.authorize();
  }

  handleAuth() {
    // When Auth0 hash parsed, get profile
    console.log(window.location.hash);
    this.auth0.parseHash(window.location.hash, (err, authResult) => {

      console.log(authResult);
      if (authResult && authResult.accessToken && authResult.idToken) {
        window.location.hash = '';
        this._getProfile(authResult);
      } else if (err) {
        console.error(`Error: ${err.error}`);
      }
      this.router.navigate(['/']);
    });
  }

  private _getProfile(authResult) {
    // Use access token to retrieve user's profile and set session
    this.auth0.client.userInfo(authResult.accessToken, (err, profile) => {
      this._setSession(authResult, profile);
    });
  }

  private _setSession(authResult, profile) {
    const expTime = authResult.expiresIn * 1000 + Date.now();
    // Save session data and update login status subject
    localStorage.setItem('token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('profile', JSON.stringify(profile));
    localStorage.setItem('expires_at', JSON.stringify(expTime));
    this.userProfile = profile;
    this.setLoggedIn(true);
  }

  logout() {
    // Remove tokens and profile and update login status subject
    localStorage.removeItem('token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
    localStorage.removeItem('expires_at');
    this.userProfile = undefined;
    this.setLoggedIn(false);
  }

  get authenticated(): boolean {
    // Check if current date is greater than expiration
    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return Date.now() < expiresAt;
  }

}

I hope this sheds some light James.

[James.Morrison]

When you get a chance can you get snag us a HAR file when the error is occurring and DM it over to me? Here’s a helpful doc that breaks down how to work with HAR files.

[clintpck]

Thanks for the tip James. I’ll use that next time. I’ve used the reset extension to reste the tenant, and now everything is working again. I expect it’s because I used a similar identifer for some api objects. Thanks so much for your patience and assitance in this regard. You can now consider the matter closed.

[James.Morrison]

I’m glad it all came together! Feel free to let us know if you need any help in the future!