AuthProviderForTesting Guide

This guide will cover how to build a demo, test, or offline version of your React app that uses mock data to simulate a logged in user. It will allow you to customize user and org data like so:

const userData = {
  "userId": "18e2cef8-a45a-4c54-a0b4-da2c814f03fb",
  "email": "test@example.com",
  // more user properties
}

const orgData = [
  {
    "4896c602-7c67-4d32-a25d-5adb9a15a60e": {
      "orgId": "4896c602-7c67-4d32-a25d-5adb9a15a60e",
      "orgName": "AcmeInc",
      // more org properties
    }
  }
]

You can then access the mock data with all downstream hooks as if it's a logged in user, such as useAuthInfo.

const WelcomeMessage = () => {
  const authInfo = useAuthInfo()

  if (authInfo.loading) {
    return <div>Loading...</div>
  } else if (authInfo.isLoggedIn) {
    return <div>Welcome, {authInfo.user.email}!</div> // "Welcome, test@example.com!"
  } else {
    return <div>You aren't logged in</div>
  }
}

Creating Mock Data

To get started, let's create some mock data that we can use in our test/demo/offline environment. It is important to format the data so it is compatible with the @propelauth/react library, and the included user properties may be different from project to project.

const userData = {
  "user_id": "89df9571-07e8-4f72-aaf5-b4073e9f1c61",
  "email": "test@example.com",
  "email_confirmed": true,
  "has_password": true,
  "username": "usernameExample",
  "first_name": "firstNameExample",
  "last_name": "lastNameExample",
  "picture_url": "https://example.com/img.png",
  "properties": {
      "favoriteSport": "Basketball"
      // other custom user properties and metadata
  },
  "metadata": null,
  "locked": false,
  "enabled": true,
  "mfa_enabled": false,
  "can_create_orgs": false,
  "created_at": 1744643928,
  "last_active_at": 1746817340,
  "update_password_required": false
}

The organization mock data is an array, with each object within that array representing an organization that the user belongs to. Again, it is important to format the data like so, as well as noting that some properties such as user_permissions may be different in your project.

const orgData = [
  {
    "bdfbbf84-bcee-4dfe-baa5-1e2dc092991d": {
      "org_id": "bdfbbf84-bcee-4dfe-baa5-1e2dc092991d",
      "org_name": "AcmeInc",
      "url_safe_org_name": "acmeinc",
      "org_metadata": {},
      "user_role": "Member", // the user's role within the org
      "inherited_user_roles_plus_current_role": [
        "Member"
      ],
      "org_role_structure": "single_role_in_hierarchy",
      "additional_roles": [],
      "user_permissions": [
        "can_edit_billing",
        "can_view_resource",
        // add your own permissions
      ]
    }
  },
  // additional organizations
]

Configuring Your React Project

Included in the @propelauth/react library is a version of the AuthProvider called AuthProviderForTesting. This version of the AuthProvider allows you to set custom user and org data, such as the example data above. Replace your existing AuthProvider with AuthProviderForTesting along with the mock user data.

import { AuthProviderForTesting } from '@propelauth/react';

const embeddedUserInfo = ({
  user: userData,
  orgMemberInfos: orgData,
  accessToken: "HARD_CODED_VALUE_FOR_TESTING"
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthProviderForTesting userInformation={embeddedUserInfo}>
    <YourApp />
  </AuthProviderForTesting>,
  document.getElementById("root")
);

Above, we pass a hard coded value as an accessToken. This value with then be returned wherever you request an access token, such as when using getAccessToken, useAuthInfo, and withAuthInfo. If you would like to generate a real access token instead, check out the Using Access Tokens section below.

Using Both Providers in the Same Project

You may want to use AuthProviderForTesting and AuthProvider in the same instance of your application. For cases like this, you'll want to find a way to distinguish between when to use the default AuthProvider and when to use AuthProviderForTesting.

One option is to use a query parameter, such as {YOUR_APP_URL}?demo=true. Let's create a component called AuthWrapper that will check if the query parameter is present. If it is, it will use AuthProviderForTesting. Otherwise, it will use the default AuthProvider.

const url = new URL(window.location.href);
const queryParams = new URLSearchParams(url.search);
const isDemo = queryParams.get('demo')

if (isDemo === 'true') {
  // set mock user and org data
  const embeddedUserInfo = ({
    user: userData,
    orgMemberInfos: orgData,
  });
  return (
    <AuthProviderForTesting userInformation={embeddedUserInfo}>
      {children}
    </AuthProviderForTesting>
  )
} else {
  return (
    <AuthProvider authUrl={"YOUR_AUTH_URL"}>
      {children}
    </AuthProvider>
  )
}

You can then wrap your application with AuthWrapper, replacing the AuthProvider you previously used when installing @propelauth/react.

import AuthWrapper from './components/AuthWrapper';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthWrapper>
    <YourApp />
  </AuthWrapper>,
  document.getElementById("root")
);

Now when you visit your application and add the query parameter (for example, http://localhost:3000?demo=true), you'll use AuthProviderForTesting instead of your standard AuthProvider.

Using Access Tokens

If you're planning on having your test/demo environment make authenticated requests to your backend, generating an access token and including it when initializing AuthProviderForTesting will allow you to keep using getAccessToken, useAuthInfo, and withAuthInfo to return an access token.

You can generate an access token via the Create Access Token API. As you may notice, it is required to include a userId of a real user in the request, so you may consider creating a test user in your application that you can use for this request.

Once you have the access token, pass it along to AuthProviderForTesting:

const accessToken = // get access token from backend API 

const embeddedUserInfo = ({
  user: userData,
  orgMemberInfos: orgData,
  accessToken: accessToken
});

return (
  <AuthProviderForTesting userInformation={embeddedUserInfo}>
    {children}
  </AuthProviderForTesting>
)