Angular 2 Custom Login

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • Angular 2.0.1
Show requirements

In the previous step, we enabled login with the Auth0 Lock widget. You can also build your own custom UI with a custom design for authentication if you like. To do this, use the auth0.js library.

Custom Login

First, add the auth0.js library to your application:

// index.html

...

<script src="https://cdn.auth0.com/w2/auth0-7.4.min.js"></script>

...

You will need an Auth0 instance. Create one using your client credentials. Include your callbackURL and set responseType: 'token':

// app/auth.service.ts
// Configure Auth0

auth0 = new Auth0({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientID: 'YOUR_CLIENT_ID',
  responseType: 'token',
  callbackURL: 'https://YOUR_APP/callback',
});

In the login method, call the login function on the auth0 instance, setting connection to Username-Password-Authentication and responseType to token:

// app/auth.service.ts

public login(username, password) {
  this.auth0.login({
    connection: 'Username-Password-Authentication',
    responseType: 'token',
    email: username,
    password: password,
  }, function(err) {
    if (err) alert("something went wrong: " + err.message);
  });
};

Since the auth0.js library uses redirect mode by default, the app will be redirected to the callbackURL after a successful login.

With responseType: 'token', the result will be appended to the URL.

Inside the Auth service constructor, check for hash information using Auth0's parseHash method, which will extract the id_token. Save it to localStorage:

// app/auth.service.ts

...

export class Auth {
  constructor(private router: Router) {
    var result = this.auth0.parseHash(window.location.hash);

    if (result && result.idToken) {
      localStorage.setItem('id_token', result.idToken);
      this.router.navigate(['/Home']);
    } else if (result && result.error) {
      alert('error: ' + result.error);
    }
  }
 ...

Now, add a form to call the login:

  <!-- app/login.template.html -->

  <form>
    <div class="form-group">
      <label for="name">Username</label>
      <input type="text" class="form-control" #username placeholder="yours@example.com">
    </div>
    <div class="form-group">
      <label for="name">Password</label>
      <input type="password" class="form-control" #password placeholder="your password">
    </div>
    <button type="submit" class="btn btn-default" (click)="auth.login(username.value, password.value)">Login</button>
  </form>

Sign up

To allow users to sign up, provide a signUp method:

// app/auth.service.ts

public signUp(username, password) {
  this.auth0.signup({
    connection: 'Username-Password-Authentication',
    responseType: 'token',
    email: username,
    password: password,
  }, function(err) {
    if (err) alert("something went wrong: " + err.message);
  });
};

and add a Sign Up button to call this method:

  <!-- app/login.template.html -->
  ...

  <button type="submit" class="btn btn-default" (click)="auth.signUp(username.value, password.value)">Sign Up</button>

  ...

Social login

To log in using a social connection, set the connection property of the login method to the identity provider you want to use:

// app/auth.service.ts

public googleLogin() {
  this.auth0.login({
    connection: 'google-oauth2'
  }, function(err) {
    if (err) alert("something went wrong: " + err.message);
  });
};

and add a button to call this method:

  <!--  app/login.template.html -->
  <button type="submit" class="btn btn-default btn-primary" (click)="auth.googleLogin()">Login with Google</button>
Previous Tutorial
2. Login
Use Auth0 for FREECreate free Account