Auth0 Lock works locally, does not work after deployment

Help
, ,
1

Hello,

I am kinda new to this. So, I am using the code from the QuickStart for authentication and create a guard for authorization.
It works just fine locally when I use ng serve.
However, when I deploy on azure, it keeps prompting me for login. Not sure what I am doing wrong.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

//Authentication
import { tokenNotExpired } from 'angular2-jwt';
import Auth0Lock from 'auth0-lock';

@Injectable()
export class AuthService {

  userProfile: any;

  // Configure Auth0
  lock = new Auth0Lock('blablabla', 'blablablabla', {
    theme: {
      logo: "http://i.imgur.com/lsIDvnL.png",
      primaryColor: "#74259C"
    }
  });

  constructor(private _router: Router) {
    // Set userProfile attribute of already saved profile
    this.userProfile = JSON.parse(localStorage.getItem('profile'));

    // Add callback for the Lock `authenticated` event
    this.lock.on("authenticated", (authResult) => {
      localStorage.setItem('id_token', authResult.idToken);

      // Fetch profile information
      this.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error) {
          // Handle error
          alert(error);
          return;
        }

        localStorage.setItem('profile', JSON.stringify(profile));
        this.userProfile = profile;

        // Redirect to the saved URL, if present.
        var redirectUrl: string = localStorage.getItem('redirect_url');
        if (redirectUrl != undefined) {
          this._router.navigate([redirectUrl]);
          localStorage.removeItem('redirect_url');
        }
      });
    });
  }

  public login() {
    // Call the show method to display the widget.
    this.lock.show();
  }

  public logout() {
    // Remove token and profile from localStorage
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
    this.userProfile = undefined;
    this._router.navigate('/home']);
  }

  public authenticated() {
    // Check if there's an unexpired JWT
    // It searches for an item in localStorage with key == 'id_token' by default
    return tokenNotExpired();
  }
}
2

Can you provide more information for what the expected behaviour should be, and where specifically the error is occuring, e.g.

  1. Display Lock
  2. User logs in
  3. Should show app dashboard

Please also check the browser debugger to see whether there are any error responses from the authentication calls.

3

Thanks @prashant !
Ok, so, I have 2 pages, Home and Dashboard. On the home page here is both a login button with no redirect and a link to the dashboard page. The dashboard page has a guard on it:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

//Services
import { AuthService } from '../services/auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private _auth: AuthService, private _router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this._auth.authenticated()) {
      return true;
    } else {
      localStorage.setItem('redirect_url', state.url);
      this._auth.login();
      this._router.navigate('/home']);
      return false;
    }
  }
}

When the user clicks on login or clicks on the link to the dashboard page, the Lock popup and after entering the right credentials, the page is refreshed and the user appears as logged in. This is locally.

However, when deployed, after entering the credentials, the page is refreshed and the lock appears again, now remembering your last used credentials. You click on them to use them again, refresh, the lock appears again. So, it’s a loop. I checked the console and there is no error. I checked the auto0 logs and all the requests appear as successful authentications.

So, I guess that somehow, the page is refreshed before the user token is actually stored. But cannot figure out why/how.

4

And here is the routing configuration:
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;

//Components
import { HomeComponent } from '../home/home.component';
import { DashboardComponent } from '../dashboard/dashboard.component';

//Guards
import { AuthGuard } from '../guards/auth.guard';

const routes: Routes = 
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '',
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})

export class KeepadooRoutingModule { }
5

Thanks for providing the additional info. Can you see the id_token or profile in localStorage?