How should development teams use auth0 in local development with custom actions flows that should call local api

Help
, , , , , ,
1

Hey Auth0 Team,

I’m a developer at a startup company. We have moved our authentication/login/registration system to Auth0.
The reason behind moving to Auth0 was to not store the passwords ourself but let Auth0 store and handle the authentication as well.
What I did within Auth0:

  • I created a custom database in auth0 with auto migration. Where Login and Get User actions are hitting our backend.
  • I created a couple of flows/actions triggered post login, where we put some custom claims/data by calling our backend and gathering custom data per user. So the front-end (auth0-spajs) has the data in the access token.

Now we run into the problem that for local development, we can’t call localhost from within these actions. Our setup is dependent on those post-login actions however.
How can we best setup our local development to work with auth0 and the custom actions?

I appreciate every word of advice and suggestion.
Thanks in advance!

3

Hi @11TStudio,

Welcome to the Auth0 Community!

First, could you please share your Post Login Action script which you are encountering issues when testing in localhost?

In the meantime, please see this example which illustrates how to append custom claims to your Access token.

Be mindful that your namespace must abide by these guidelines.

I am looking forward to your reply.

Thank you.

4

First of all thanks for your reply @rueben.tiow !
This is the custom script that I use;

/**

* Handler that will be called during the execution of a PostLogin flow.

*

* @param {Event} event - Details about the user and the context in which they are logging in.

* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.

*/

exports.onExecutePostLogin = async (event, api) => {

  const userLoginMethod = event.user.user_id.split("|")[0]; // waad, auth0, etc etc

  const axios = require("axios");

  const jwt = require("jsonwebtoken")

  const URL_TO_BACK_END = "https://ourCustomerComainHere-backend.myOwnDomain.info/api"

  const ENDPOINT = "/getAuth0UserBlue"

  const TOKEN = api.redirect.encodeToken({

    secret: event.secrets.SHARED_SECRET,

    payload: {

      firstName: event.user.given_name || '',

      lastName: event.user.family_name || '',

      email: event.user.email,

      userName: event.user.username || event.user.nickname || `${event.user.name||event.user.given_name}${event.user.family_name||''}`,

      allIdentities: event.user.identities,

      userLoginMethod: userLoginMethod

    },

  })

  try{

    // Now get the user if he exist.

    const getUser = await axios.get(`${URL_TO_BACK_END}${ENDPOINT}`, {

      headers: {

      'content-type': 'application/json',

      'Authorization': `Bearer ${TOKEN}` // I use this to verify the call at the backend using the shared secret

      }

    });

   

    const payload = jwt.verify(getUser.data.accessToken, event.secrets.SHARED_SECRET) // I verify the response that I get if it is also signed with the correct secret

    // userId

    api.idToken.setCustomClaim(`https://ourCustomerComainHere.com/userId`, payload.userId);

    api.accessToken.setCustomClaim(`https://ourCustomerComainHere.com/userId`, payload.userId);

    // userType

    api.idToken.setCustomClaim(`https://ourCustomerComainHere.com/userType`, payload.userType);

    api.accessToken.setCustomClaim(`https://ourCustomerComainHere.com/userType`, payload.userType);

    // customerIds

    api.idToken.setCustomClaim(`https://ourCustomerComainHere.com/customerIds`, payload.customerIds);

    api.accessToken.setCustomClaim(`https://ourCustomerComainHere.com/customerIds`, payload.customerIds);

    // supplierIds

    api.idToken.setCustomClaim(`https://ourCustomerComainHere.com/supplierIds`, payload.supplierIds);

    api.accessToken.setCustomClaim(`https://ourCustomerComainHere.com/supplierIds`, payload.supplierIds);
 
    api.user.setUserMetadata('languageCode', payload.languageCode)

  } catch (err) {

    api.access.deny(err.response.data);

  }

};

/**

* Handler that will be invoked when this action is resuming after an external redirect. If your

* onExecutePostLogin function does not perform a redirect, this function can be safely ignored.

*

* @param {Event} event - Details about the user and the context in which they are logging in.

* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.

*/

exports.onContinuePostLogin = async (event, api) => {

};
5

Hey @rueben.tiow is there another way of doing the above action localhost/local development friendly? I waited a week not wanting to spam you but we need a solution as soon as possible and any help/tips/suggestions is appreciated :frowning:

1 Like
6

Hi @11TStudio,

Thank you for your response and patience.

After my investigation, I found that your Post Login Action script is setting the custom claims to the tokens correctly.

Because of that, there does not seem to be a specific error in your script.

Moreover, I would like to clarify that you cannot call localhost from within the Action scripts. Your local machine and the Auth0 authorization servers do not share the same instance, hence unable to communicate with localhost. In this case, you must deploy your API to the cloud to be obtainable through your Axios requests.

Hoped this helps!

Please let me know if you have any questions.

Thank you.

1 Like