Documentation is seriously misleading and lacking information

First, I like auth0, I need auth0, but auth0 is making my life very difficult, the one reason I want to move to auth0 is to make life simpler and not have to maintain additional cruft.

THE BIG Q: Is there a stable documentation for stable api, for stable version ?

I am new to Auth0 but I find it extremely difficult to integrate, with too many unknowns. Almost all resources on the web are revolving around v7. Now, v8 is at what version ? What should people use ? What is the most stable API ? The one used in the documentation or 8.1.2 ? The one used in documentation is 8.0.4 Can’t the documentation be in sync in the git libraries ? For https://auth0.com/docs/libraries/auth0js - is this all the API documentation there is ? This is what I would like to use, but look at how well it is documented: You get nothing! I am not alone https://auth0.com/forum/t/getuserprofile-equivalent-in-auth0-js-v8/4916/5 Then this From https://auth0.com/forum/t/getuserprofile-equivalent-in-auth0-js-v8/4916/6 - for v8

So basically, the login method is still in wip

Then another gem, silentAuth - we know it exists, some people use it, not documented at all. Moving forward, the webAuth.popup.loginWithCredentials … documented but deprecated (nowhere mentioned)

I am almost giving up, I am unable to have a proper login working, without pop-ups or custom page re-directions … That redirect can be avoiding using an iframe(and still keep SSO), but it is not documented at all … there is this legendary usePostMessage option to communicate with the iframe, but to apply to which method of authentication - the only mention of that arg is in renewAuth … but I am not able to go past log-in … so how can I arrive at renew ?

[scottescue]

Holy F&$%!!!

I just spent several evenings trying to get custom authentication working with my angular-cli (Angular 2) app. I had completely given up on Auth0 and was working on moving to Firebase, only to then discover the LoginComponent from your ‘Angular 2+ Custom Login’ is broken/incomplete.

Specifically, this button triggers a full page refresh which breaks authentication workflow

<button
  type="submit"
  class="btn btn-default"
  (click)="auth.login(username.value, password.value)">
    Log In
</button>

This should either be type="button", or you should clearly point out the FormsModule from ‘@angular/forms’ needs to imported into the module containing the LoginComponent. YES, I should have spotted this error much sooner, but I took the example to be complete and spent a ton of time needlessly tracing auth0-js internals.

It’s hardly worth mentioning given how frustrated I am about the form, but the ‘handleAuthentication’ function in the Auth class is also broken where it references authResult.error in the parseHash callback. The authResult object doesn’t have an error property; a separate error object is also passed into the callback function. I assume this should look something like the following:

  public handleAuthentication(): void {
    this.auth0.parseHash({ _idTokenVerification: false }, (err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        window.location.hash = '';
        localStorage.setItem('access_token', authResult.accessToken);
        localStorage.setItem('id_token', authResult.idToken);
        this.router.navigate(['/home']);
      } else if (err && err != null) {
        alert('Error: ' + err);
      }
    });
  }

[Bengejd]

Hey there! I’m not sure what documentation you’ve been following, but everything that I have been working in has worked flawlessly. There were some snafu’s but I worked the kinks out for the most part.

Here is how I am authenticating my users. Firstly I have the user fill out my login.html form, which on clicking the submit button calls my onSubmit() function in login.component.ts. onSubmit().

onSubmit() then calls my auth.service.ts file, which is shown below:

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { Router } from '@angular/router';

import { AngularFire, FirebaseListObservable } from 'angularfire2';

// Avoid name not found warnings
declare var auth0: any;

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class AuthService {

  // Configure Auth0
  auth0 = new auth0.WebAuth({
    domain: 'YOUR-AUTH0-DOMAIN',
    clientID: 'YOUR-AUTH0-CLIENT-ID',
    // specify your desired callback URL
    callbackURL: 'http://localhost:3000/',
    responseType: 'token id_token'
  });

  // Configure AuthLock
  lock = new Auth0Lock('YOUR-CLIENT-ID', 'YOUR-AUTH0-DOMAIN', {});

  //Store profile object in auth class
  userProfile: Object;

  constructor(private router: Router, private angularFire: AngularFire) {

    // Set Auth0 userProfile attribute of already saved profile
    this.userProfile = JSON.parse(localStorage.getItem('profile'));

  }
  public handleAuthentication(): void {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        window.location.hash = '';
        localStorage.setItem('access_token', authResult.accessToken);
        localStorage.setItem('id_token', authResult.idToken);
      } else if (authResult && authResult.error) {
        console.log('Error: ' + authResult.error);
      }
    });
  }

  public login(username: string, password: string): void {

    console.log("Logging into Auth0 now...");

    this.auth0.client.login({
      realm: 'Username-Password-Authentication',
      username,
      password
    }, (err, authResult) => {
      if (err) {
        console.log('Error: ' + err.description);
        return;
      }

      // If we successfully login to Auth0
      if (authResult && authResult.idToken && authResult.accessToken) {

          this.setUser(authResult);
          console.log("Logged into Auth0!");

      // Now we use Auth0Lock ("lock") to getUserInfo, since getUserProfile is depreciated.
        this.lock.getUserInfo(authResult.accessToken, (error, profile) => {
          if (error) {
            // tmp error handling
            alert(`Auth service 2: ${error}`);
            return;
          }

          profile.user_metadata = profile.user_metadata || {};

          // Sets the Auth0 User Profile as a JSON object called 'profile'
          localStorage.setItem('profile', JSON.stringify(profile));
          console.log("Auth0 Profile JSON: ");
          console.log(localStorage.getItem('profile'));
        });
      }
    });

// DO ADDITIONAL STUFF HERE AFTER LOGIN.

  }
  public signup(email, password): void {
    this.auth0.redirect.signupAndLogin({
      connection: 'Username-Password-Authentication',
      email,
      password,
    }, function(err) {
      if (err) {
        alert('Error: ' + err.description);
      }
    });
  }

  public isAuthenticated(): boolean {
    // Check whether the id_token is expired or not
    return tokenNotExpired();
  }

  public logout(): void {
    // Remove token from localStorage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    console.log("Logged Out!");
  }

  private setUser(authResult): void {
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
  }
}

I hope this helps, I haven’t had a single issue using Auth0 so far, and have found the documentation pretty straight forward - for the most part, with some confusing parts here or there depending on the version you’re using (v7 vs v8). After authentication gets called, my routes get unlocked by my auth.guard.ts, which I didn’t include, but can add it later if you want a reference on how to unlock the application, but they also cover this partially in their docs, though my implementation isn’t from Auth0.

All of the console.log messages are just for testing purposes for my sake. So I know where things are going wrong, and to ensure that everything is working properly. Take them out when you push the project into production.