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

--

--

--

Dev Advocate Intern @ DigitalOcean & codedamn | GitHub Campus Expert & Stream Team | GDSC & Hack Club Lead | Alexa Student Influencer | Ex- MLH Coach

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

Recommended from Medium

Bi-Directional Cursor Pagination with React.js, Relay, and GraphQL

React doesn’t always trigger a re-render on setState

Day 32 — Improvments: visualizing shield strength

Vue.js, Vuex, and Testing; an Introduction

Things you should know about react

Read the latest news! Integration of Huawei Push Kit in Application using React Native

Components that work in your framework and everywhere else too

How to validate a TAR file in Node.JS

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

Dev Advocate Intern @ DigitalOcean & codedamn | GitHub Campus Expert & Stream Team | GDSC & Hack Club Lead | Alexa Student Influencer | Ex- MLH Coach

More from Medium

Understanding Git Rebase — A Case Study

Developing Face Detection Application — Using Azure Cognitive Services Face API & React

API 101 using Postman

How to Create Your Certificate and Use It With Postman