Custom Login Method Not Paring Token

[saniyusuf]

Hi, I have gone ahead to user Auth0 to integrate the Stitch Client. The auth0 part works and returns the JWT, however the method to authenticate with JWT returns an error code 46 with the message "token not valid" .

Im not sure why but there is literally no troubleshooting for this anywhere. Any Ideas what might be wrong?

[adamchel]

Hi @saniyusuf, we have a documentation page discussing how to use the custom authentication provider: https://docs.mongodb.com/stitch/authentication/custom/

In particular, you are likely receiving the error because the JWT from Auth0 is missing the required payload fields: https://docs.mongodb.com/stitch/authentication/custom/#payload. In particular, the audience field of the JWT must specify the client app ID of the Stitch application.

The auth0 SDKs offer a way of specifying the audience: https://auth0.com/docs/libraries/auth0js/v9

If this does not work, let me know and we can try to debug the issue

[saniyusuf]

@adamchel you my friend are a legend. I am totally missing the payload yes. Let me try and get back to you.

[saniyusuf]

@adamchel So I have looked at it, the audience field is to be the Stitch App ID when on the returned JWT. However, im finding it impossible to set this. If I set the audience to the Stitch app ID, the Auth0 wouldn't go as it expects it to be my auth0 URL. Any thoughts on how to issue this?

[adamchel]

Ah, in the auth0 interface, you need to specify MongoDB Stitch as an API:

Make sure you select HS256 as the signing algorithm.

In the resulting settings page, you can get the signing secret that you will use to configure the custom provider in Stitch.

Once the API is set up, you can use the stitch client app ID as the audience.

The access token JWT you get back from auth0 can then be passed into loginWithCredential using a CustomCredential.

I got this working locally:

// initialize Stitch
const client = Stitch.initializeDefaultAppClient('<your-stitch-client-app-id>');

window.addEventListener('load', function() {
  // create the Auth0 authentication service:
  var webAuth = new auth0.WebAuth({
    domain: '<your-auth0-domain>',
    clientID: '<your-auth0-client-id>',
    responseType: 'token id_token',
    audience: '<your-stitch-client-app-id>',
    scope: 'openid',
    redirectUri: window.location.href
  });

  // Create a login button
  var loginBtn = document.getElementById('btn-login');
  loginBtn.addEventListener('click', function(e) {
    e.preventDefault();
    webAuth.authorize();
  });

  // handle the auth0 redirect and use the JWT to log into Stitch
  webAuth.parseHash(function(err, authResult) {
    if(authResult && authResult.accessToken) {
      window.location.hash = ''

      client.auth.loginWithCredential(
        new CustomCredential(authResult.accessToken)
      ).then(user => {
        document.getElementById('auth-status').innerHTML = 
          `Logged in as a custom user with id ${user.id}`;
      });
    } else if (err) {
      console.errror(`Auth0 error: ${err}`)
    }
  });
});

Let me know if you have any other questions.

We will look into documenting this process for our documentation.

[saniyusuf]

@adamchel 100% Works now thank you. I really appreciate your help. I think stitch is a wonderful platform but heavily under-documented. I will surely help out with this. let me know if you need any help