# 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:

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

const orgData = [
  {
    "orgId": "4896c602-7c67-4d32-a25d-5adb9a15a60e",
    "orgName": "PropelAuth",
    // 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](https://docs.propelauth.com/reference/frontend-apis/react#use-auth-info).

```jsx
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](https://docs.propelauth.com/reference/frontend-apis/react/authProviderForTesting-guide#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](https://docs.propelauth.com/overview/user-management/user-properties#default-user-properties) may be different from project to project.

```jsx
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.

```jsx
const orgArray = [
  {
    "orgId": "4896c602-7c67-4d32-a25d-5adb9a15a60e",
    "orgName": "PropelAuth",
    "orgMetadata": {},
    "urlSafeOrgName": "propelauth",
    "orgRoleStructure": "single_role_in_hierarchy",
    "userAssignedRole": "Owner",
    "userInheritedRolesPlusCurrentRole": [
      "Owner",
      "Admin",
      "Member"
    ],
    "userPermissions": [
      "propelauth::can_invite",
      "propelauth::can_change_roles",
      "propelauth::can_remove_users",
      "propelauth::can_setup_saml"
    ],
    "userAssignedAdditionalRoles": []
  }
]
```

## [Configuring Your React Project](https://docs.propelauth.com/reference/frontend-apis/react/authProviderForTesting-guide#configuring-your-react-project)

Included in the `@propelauth/react` library is a version of the [AuthProvider](https://docs.propelauth.com/reference/frontend-apis/react#auth-provider) 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.

```jsx
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 will then be returned wherever you request an access token, such as when using [getAccessToken](https://docs.propelauth.com/reference/frontend-apis/react#tokens), [useAuthInfo](https://docs.propelauth.com/reference/frontend-apis/react#use-auth-info), and [withAuthInfo](https://docs.propelauth.com/reference/frontend-apis/react#with-auth-info). If you would like to generate a real access token instead, check out the [Using Access Tokens](https://docs.propelauth.com/reference/frontend-apis/react/authProviderForTesting-guide#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**.

```jsx
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](https://docs.propelauth.com/reference/frontend-apis/react#initialization).

```jsx
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](https://docs.propelauth.com/reference/frontend-apis/react/authProviderForTesting-guide#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](https://docs.propelauth.com/reference/frontend-apis/react#tokens), [useAuthInfo](https://docs.propelauth.com/reference/frontend-apis/react#use-auth-info), and [withAuthInfo](https://docs.propelauth.com/reference/frontend-apis/react#with-auth-info) to return an access token.

You can generate an access token via the [Create Access Token API](https://docs.propelauth.com/reference/api/user#create-access-token). 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**:

```jsx
const accessToken = // get access token from backend API

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

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