React Rules

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • React 15.3
Show requirements

Rules are one of the most powerful features of Auth0. As JavaScript functions that execute each time a user authenticates, rules serve as middleware to extend the flexibility of your authentication flow. For a detailed description of rules, see the full documentation.

Create a Rule

To create a rule, go to the New Rule page. You can create a rule from scratch by selecting an empty rule, or you may use one of the existing templates. These templates are written by Auth0 to cover common scenarios and use cases.

For this example, select the Add country to the user profile rule.

Empty rule

This rule extracts the country_name from the context and adds it to the user profile as a new country attribute.

Add country rule

Note: You can use any of the pre-built rules or create your own to meet your business needs.

Once complete, click Save. The rule will execute any time a user logs in, and the country will be added to the user's profile.

Test the Rule Result

To see the results of a created rule, log in and fetch the user’s profile information, as explained in the User Profile step.

Then you can display the user profile's new country attribute added by the rule:

// src/components/Profile/ProfileDetails.js

import React, { PropTypes as T } from 'react'
import {Row, Col, Image} from 'react-bootstrap'
import s from './styles.module.css'

export class ProfileDetails extends React.Component {
  static propTypes = {
    profile: T.object

  render() {
    const { profile } = this.props
    return (
      <Row className={s.root}>
        <Col md={2} mdOffset={4}>
          <Image src={profile.picture} circle className={s.avatar} />
        <Col md={6}>
          <h3>Profile Details</h3>
          <p><strong>Name: </strong> {}</p>
          <p><strong>Email: </strong> {}</p>
          <p><strong>Nickname: </strong> {profile.nickname}</p>
          <p><strong>Created At: </strong> {profile.created_at}</p>
          <p><strong>Updated At: </strong> {profile.updated_at}</p>
          <p><strong>Country (added by rule): </strong> {}</p>

export default ProfileDetails;

Country rule sample

Previous Tutorial
6. Linking Accounts
Next Tutorial
8. Authorization
Use Auth0 for FREECreate free Account