Introduction to Auth0 Actions

What are Auth0 Actions?

Why Auth0 Actions?

  • Observability: When Actions are executed, Auth0 will capture key metrics about them and link them to Auth0 Logs.
  • Extensibility: Auth0 Actions is built to give developers more tooling and a better experience in their login workflows.
  • Multiple actions on every trigger: Every Action trigger supports multiple independent Actions.
  • Version Control: You have the ability to store a history of individual Action changes and the power to revert back to previous versions as needed.
  • Access to NPM Packages: Nearly all public NPM packages are available to be used within Actions.
  • Pre-Production Testing: Your personal Actions can be drafted, reviewed, and tested before deploying into production.
  • Improved Developer Experience: The flow editor lets you visually build custom workflows with drag and drop Action blocks for complete control.

Implementation

  1. An Auth0 Account (if you don’t have one yet, visit this link and create one for free)
  2. Any Code Editor of your choice. I’d recommend Visual Studio Code.

Getting Started with Auth0

  1. Assuming that you already have an Auth0 Account, scroll down to find the option that says “Create Application”.
  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins

Setting Up Users and Roles

  1. Click on the User Management Tab in the sidebar. Click on the Users tab followed by the Create User Option. We’ll create 2 Users for our Action.

Setting Up the React App

  1. Unzip the file we downloaded a while back and open the folder in a code editor of your choice. In src/auth_config.json add the details of your application from the Auth0 Dashboard, specifically the domain and Client ID.
  2. To run the code, we first need to install the dependencies. Execute npm installfor the same. Execute the following to run the application in development mode npm run dev. You’ll see a Single Page Application like the one below built using React.

Setting Up Actions

  1. Click on the Actions tab in the sidebar towards your left. Go to the Flows Category to set up the flow of our Login. Select Login Flow. This will run the flow of action once the trigger is executed.
if (event.authorization != undefined && event.authorization.roles.includes("Admin")) {
api.multifactor.enable("any");
};

Running the Application

Ending Notes

--

--

--

Community @ Aviyel | MLH Coach | GitHub Campus Expert | DigitalOcean Navigator | GDSC & Hack Club Lead | Alexa Student Influencer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is the difference between useEffect and useState in React?

I Don’t Want To Use jQuery Anymore

Top JavaScript Frameworks: What’s Going to Rule 2021?

30 Day Typescript Type Challenge — Challenge 20

Node.JS Api services are simple, right?

How to generate a UPC-A barcode as a PNG file in Node.JS

5 Browser Dev Tools Tips To Ace Your Web Development Skills

Web developer working at his desk

What exactly is a Closure in JavaScript?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaishika S Bhattacharya

Aaishika S Bhattacharya

Community @ Aviyel | MLH Coach | GitHub Campus Expert | DigitalOcean Navigator | GDSC & Hack Club Lead | Alexa Student Influencer

More from Medium

Git Feature — A new methodology to manage your development work

Cherry-picking done easy

Magneto 2: Trying to build Split Database Master and Slave for Magento2 CE (Part 1)

How We Made Vite Run in Browser