Silent Authentication Failure When Attempting Login Using Audience of Custom API

[mike.mcclannahan]

Going through the demo for the SPA using the auth0-spa-js SDK, and using a custom database connection that calls a public API of ours. I was able to get login working and returning an opaque string token. However, after adding our own API as an API in the Dashboard (to generate JWTs instead of opaque strings) and setting it as an audience in the loginWithRedirect() call, the user clicks login, completes the authentication flow via the universal login, and then is redirected back to the application. However the user does not appear to be logged in as the isAuthenticated() call returns false.

const login = async () => {
await auth0.loginWithRedirect({
  redirect_uri: window.location.origin,
  audience: 'https://staging-api.mydomain.com'
  });
};

All I have to go off of is the logs in the dashboard which show:

1. Failed Silent Auth ("description": "Login required")
2. Successful Login
3. Success Exchange

Here is a rough appoximation of the network calls made after the user completes the login on the universal login page in ascending order:

1. GET http://localhost:3000/?code=....&state=… [200]
2. GET https://mydomain.auth0.com/login/callback?state=… [302]
3. GET https://mydomain.auth0.com/authorize?client_id=....&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile%20email&state=...&nonce=...&connection=my-db&login_hint=mike%mydomain&sso=true&response_mode=query&_intstate=deprecated&_csrf=...&audience=mydomain&code_challenge_method=S256&code_challenge=...&auth0Client=...&protocol=oauth2 [302]

[dan.woda]

Hey @mike.mcclannahan!

Welcome to the Auth0 Community.

I have a few questions to try and narrow down the issue;

• Are you using a private browsing/incognito window to test? If not, what happens when you do?
• Can you post the code you wrote including the isAuthenticated call and client initialization? (or link to the guide you followed if you followed it exactly.)
• Could you also DM me your tenant name and provide a HAR file of the transaction.

Thanks,
Dan

[mike.mcclannahan]

1. When in a private browser session the behavior is the same.
2. tutorial

let auth0 = null;

const configureClient = async () => {
    auth0 = await createAuth0Client({
      domain: 'mydomain.auth0.com',
      client_id: 'myclientid'
    });
};

window.onload = async () => {

    // .. code ommited for brevity
    await configureClient(); 
    updateUI();
  
    const isAuthenticated = await auth0.isAuthenticated();
  
    if (isAuthenticated) {
      // show the gated content
      return;
    }
  
    // NEW - check for the code and state parameters
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {
  
      // Process the login state
      await auth0.handleRedirectCallback();
      
      updateUI();
  
      // Use replaceState to redirect the user away and remove the querystring parameters
      window.history.replaceState({}, document.title, "/");
    }
};

const updateUI = async () => { 
    const isAuthenticated = await auth0.isAuthenticated();
    console.log(isAuthenticated);
  
    document.getElementById("btn-logout").disabled = !isAuthenticated;
    document.getElementById("btn-login").disabled = isAuthenticated;
    
    // NEW - add logic to show/hide gated content after authentication
    if (isAuthenticated) {
      // console.log(await auth0.getTokenSilently());
      document.getElementById("gated-content").classList.remove("hidden");
  
      document.getElementById(
        "ipt-access-token"
      ).innerHTML = await auth0.getTokenSilently();
  
      document.getElementById("ipt-user-profile").innerHTML = JSON.stringify(
        await auth0.getUser()
      );
  
    } else {
      document.getElementById("gated-content").classList.add("hidden");
    }
  };
  

const login = async () => {
    await auth0.loginWithRedirect({
      redirect_uri: window.location.origin,
      audience: 'https://staging-api.equipmentshare.com'
    });
};


const logout = () => {
    auth0.logout({
      returnTo: window.location.origin,
      responseType: 'token'
    });
  };

[dan.woda]

Just for clarification, are you experiencing any issues with the app? Can you ping your api successfully? And are you able to retrieve the profile?

[mike.mcclannahan]

I’m not sure what changed but I am now getting a JWT back from the service…

Thanks for looking into it.

[dan.woda]

Excellent.

Let us know if there is anything else we can do to help.

Thanks,
Dan