How do I convert redirect.loginWithCredentials(v7) to same call with client.login(v8)?

I’m trying to convert over my call to redirect.loginWithCredentials to the newer client.login call, but I’m having trouble passing the right parameters. I have two code snippets below, the first code snippet is working and I’m able to log in via username/password combo. When I call the second method, I get a 401 with this payload {“error”:“access_denied”,“error_description”:“Unauthorized”}

I have converted over to using RS256 tokens. I’m using auth0-js (v8.7.1) in a SPA. Not sure if relevant, but in my account settings → API Authorization Settings → Default Audience and Default Directory are blank.

What am I missing in the new call?
Thanks!

I’m constructing the auth0 client in the same way for both

// Configure Auth0
this.auth0 = new auth0.WebAuth({
  clientID: Config.AUTH0_CLIENT_ID,
  domain: Config.AUTH0_DOMAIN,
  leeway: 60 // 1 minute leeway
});

LOGIN_TOKEN SCOPE = “openid app_metadata”

Code that is working:

let loginParams = {
  connection: Config.AUTH0_CONNECTION,
  username: email,
  password: password,
  responseType: 'token',
  redirectUri: `${Config.clientUrl}/auth/callback`,
  scope: LOGIN_TOKEN_SCOPE
};

if (targetPath) {
  const stateParams = {
    targetPath: targetPath
  };
  loginParams.state = Base64.encode(JSON.stringify(stateParams));
}

this.auth0.redirect.loginWithCredentials(loginParams, onError);

Code that isnt working:

let clientLogin = {
  realm: Config.AUTH0_CONNECTION,
  username: email,
  password: password,
  scope: LOGIN_TOKEN_SCOPE
};

this.auth0.client.login(clientLogin, onError);

Have in mind that the methods you mentioned are not exactly equivalent, for example, client.login performs a resource owner password credentials (ROPC) grant. This grant should only be used by highly trusted client applications as it requires direct handling of user credentials. The recommendation for a SPA would be to use the authorize method to redirect to the hosted login page where the user would enter their credentials.

As an additional benefit of going through the hosted login page is that an authentication session could be established and reused for SSO purposes for example. The use of ROPC does not initiate any authenticated session.

Having said that, the most likely cause for the error you mentioned when doing a ROPC grant through client.login is an incorrectly configured client application. More specifically if the client application is configured to demand that requests to the token endpoint (used by ROPC) require client authentication (a client secret in addition to the client identifier) then trying to call the client.login method will result in an Unauthorized error because Auth0.js is not sending the client secret that the endpoint requires. In order to resolve this, you need to ensure that the token endpoint authentication method is set to none; this can be done directly through the Management API with a call to update the client or more easily accomplished by selecting the proper Client Type in the client application Dashboard settings. For example, setting the client type to SPA through the Dashboard would have the side-effect of setting token endpoint authentication method to none.

Thanks for that explanation, so it sounds like client.login is not a replacement for the deprecated redirect.loginWithCredentials. Right now we are calling redirect.loginWithCredentials from the client which is an SPA, it sounds like if we want to continue using the same workflow, we need to implement a server route that calls client.login. Ultimately, the most ideal solution would be to redirect to allow for SSO.

Is that the right takeaway from this?

Yes, your observation is correct; it’s not a equivalent replacement. Ideally, for the SPA scenario the recommended approach would be the redirect to the hosted login page. We’re also working on providing additional alternatives that could be a more compatible replacement for the method you were using, however, they are still not completely documented so I can’t point you to anything concrete at this time.