Using Auth0.js method loginWithCredentials triggers a 404

Help
, ,
1

I am trying to implement a custom login in my Angular 2 SPA.

Upon attempting to log in I get “POST https://[domain]/usernamepassword/login 404 (Not Found)” error and an alert message saying null. This is a screenshot with some details:

![alt text][1]

If I try logging in with the same information with Auth0’s default login it goes through without a problem. I also tried creating a new user but the result was the same. (No matter what I enter as username and password the result is always the same).

Here is the auth.service.ts: (it is exactly the same as the official documentation with the exception of including "import * as auth0 from ‘auth0-js’; " at the top):

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

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

@Injectable()
export class Auth {

  // Configure Auth0
  auth0 = new auth0.WebAuth({
    domain: '[domain]',
    clientID: '[clientID]',
    // specify your desired callback URL
    redirectUri: 'http://localhost:54435/home',
    responseType: 'token id_token'
  });

  constructor(private router: Router) {
  }

  public handleAuthentication(): void {
    this.auth0.parseHash({ _idTokenVerification: false }, (err, authResult) => {
      if (err) {
        alert("Error")
      }
      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']);
      }
    });
  }

  public login(username: string, password: string) {
    this.auth0.redirect.loginWithCredentials({
      connection: 'Username-Password-Authentication',
      username,
      password
    }, err => {
      if (err) return alert(err.description);
    });
  }

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

  public logout() {
    // Remove token from localStorage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
  }

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

I made sure to include this.auth.handleAuthentication(); in my root component.

Any idea what I am doing wrong?

The versions I’m using:

“angular2-jwt”: “^0.2.3”, “auth0-js”: “^8.6.0”, “auth0-lock”: “^10.14.0”

I’m willing to provide any additional information.

2

The most simple explanation for a 404 response when using the method loginWithCredentials would be that you’re specifying a connection that does not exist; hence the not found error code.

According to the information you provided you’re specifying Username-Password-Authentication as the name of the connection to be used so ensure that this connection exists.

3

Yes that was it. Setting the connection name to “Auth0” in the login function solved it.