Go ahead and log in to your Auth0 account. In the left sidebar, there is a new tag titled “Actions”. Go ahead and click on that. You’ll notice that it has two subcategories, “Flows” and “Custom Actions”. Click on "Flows".
If you don't see the actions tab in your dashboard, please see the planned rollout schedule below to check when you will have access.
Flows represent a high-level operation within Auth0. There are currently two identity flows that you can add Actions to, “Login” and “M2M” (Machine to Machine). Go ahead and click on “Login”.
This initial view shows the entire authentication flow for your solution, with drag and drop functionality to customize it. If your solution has any Rules already set up, you will see them in this view. Any Rules that are defined will be triggered first, and then they will flow into your Actions.
The top right corner of this view shows a question mark icon. If you click on this, you will be given a pop-over walkthrough of this view.
Let’s click on the “Create Action” option on the right side of this view.
Let’s call this Action “Trigger MFA” and click “Create”.
This next view is where we can customize this new Trigger MFA action.
Right off the bat, you can see the improved code editor, version history button, save as a draft button, and the deploy button.
Unlike with Rules and Hooks, the code editor holistically supports:
Testing
Secret management
Virtually any NPM module
Linting
Quick hints
and TypeScript
Also, async / await is set up by default so you do not need to use callbacks.
In order to see the custom hint functionality, all we need to do is is do CMD + Space (ctrl + space on Windows). Also, by simply hovering over objects such as event and context, you will see their documentation in a pop-up.
Notice on the left side of the editor is a couple of icons. The play icon is how we can test our Action before we deploy it, more on that in a little bit. The key icon is how we can add and use secrets in our Action. For example, when working with APIs, such as the Slack API, we want to make sure we do not expose any API keys accidentally. This is where we can store it once, keep it secure, and reference it in our Actions editor.
Finally, the last box icon is how we can add virtually any NPM module in our Actions.
Let’s go ahead and write out our Action. We are going to write an Action that enforces multi-factor authentication with Guardian.
Notice the return object within the function. This is what we are going to be working on. I am going to type in the command as an object, give it a type of "multifactor", as well as a provider of “guardian”.
Code:
/** @type {PostLoginAction} */
module.exports = async (event, context) => {
return {
command: {
type: "multifactor",
provider: "guardian"
}
};
};
Here, with this code, we are enforcing multi-factor authentication with Guardian.
The command property is checked and executed during the authentication flow. Currently, there are only two commands, "multifactor" and "redirect" (which redirects the user to a provided link after authentication).
Once we are satisfied with our code, we can test this as-is, before pushing it to production. We do this by pressing the play icon on the left sidebar and then clicking "Run" at the bottom. This will run our code and display the output on the bottom of the editor. We also have the ability to test different scenarios by updating the test data.
Now, go ahead and click on "Save draft". We can also revert this action to a previously saved or deployed version, by pressing on the version control button on the top of this page. This view shows all saved versions with a push-button revert process.
Now that we’ve tested and are ready to go with our Action, we can deploy it by clicking on the "Deploy" button at the top. If an action is not deployed, it does not appear in our flow Action list.
If we click on the “Custom Actions” back arrow, we can see our newly created Trigger MFA Action. We can also see its Node version, the last updated timeline, and its current status.
Now, let’s actually add this to our flow. Click on the “Flows” tab on the left side navigation, and then click "Login".
This will take us back to our flow builder and our Trigger MFA Action is now available to be dragged and dropped into our login flow.
Once we’ve added our Action to the Flow, to make it final, we need to press on the “Save” then “Apply” buttons.
Now let’s try it out.
As I try logging into my application, I see the expected login form at first.
Once I make it through that page, I am shown the download MFA screen!
Once I’ve set up my MFA app on my phone, I receive a push notification to my phone to allow me to finish authenticating.
And that's all! With Auth0 Actions, we were able to:
Quickly create a reusable custom Action with a built-in user-friendly code editor
Test, save, and rollback to different versions of the flow
Attach it to a trigger
Top comments (0)