Logo
Frontend
Backend 

React

The @propelauth/react library is designed for React frontends. This could be vanilla React managed by Vite, Next.js (either Pages or App router) with a separate backend, create-react-app, etc.

Installation

npm install @propelauth/react

Configuration

We need to tell PropelAuth where our application is running so that it will allow requests from our application. Go to the Frontend Integration section of your PropelAuth dashboard, and enter http://localhost:3000 into the Application URL field:

primary fe location

While we're here, we'll also copy the Auth URL into an .env file, which we'll use in a second:

.env

# Test environment only, in production, we'll use our own domain
REACT_APP_AUTH_URL=https://something.propelauthtest.com

# If you are using Vite:
# VITE_AUTH_URL=https://something.propelauthtest.com

Initialization

At the root of your application, wrap your app in an AuthProvider component.

index.js

import { AuthProvider } from "@propelauth/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <AuthProvider authUrl={process.env.REACT_APP_AUTH_URL}>
        <YourApp />
    </AuthProvider>,
    document.getElementById("root")
);

The AuthProvider is responsible for fetching the current user's authentication information. If your entire application requires the user to be logged in (for example, for a dashboard), use RequiredAuthProvider instead and you'll never have to check isLoggedIn.

Authorization in the React library

On the frontend, authorization is useful for hiding UI elements that the user doesn't have access to. You will still need to implement authorization on the backend to prevent users from accessing data they shouldn't.

For example, you may want to hide the "Billing" page from users who aren't admins. You can do this by using the UserClass to check if the user has the "Admin" role.

const Sidebar = withRequiredAuthInfo(({userClass}) => {
    // We're using the router here to get the current orgId
    const router = useRouter()
    const orgId = router.query.orgId as string

    // Only Admins can see the billing page, so hide it from the sidebar
    const isAdmin = userClass.isAtLeastRole(orgId, "Admin")
    return <div>
        <div>Dashboard</div>
        <div>Reports</div>
        {isAdmin && <div>Billing</div>}
    </div>
})

AuthProvider

AuthProvider is the provider of a React context that manages the current user's access token and metadata. You cannot use the other hooks without it. AuthProvider is the component that manages authentication information and all other components fetches from it.

It is recommended to put the AuthProvider component at the top level of your application, so it never unmounts.

Properties

  • Name
    authUrl
    Type
    string
    Description

    The base URL where your authentication pages are hosted. You can find this under the Frontend Integration section for your project.

index.js

import { AuthProvider } from "@propelauth/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <AuthProvider authUrl={process.env.REACT_APP_AUTH_URL}>
        <YourApp />
    </AuthProvider>,
    document.getElementById("root")
);

RequiredAuthProvider

If your entire application requires a user to be logged in, you should prefer the RequiredAuthProvider. Similar to the AuthProvider, the RequiredAuthProvider manages the current user's access token and metadata.

However, the RequiredAuthProvider will also redirect the user to the login page if they are not logged in. You can override this behavior by providing a your own displayIfLoggedOut property.

Properties

  • Name
    authUrl
    Type
    string
    Description

    The base URL where your authentication pages are hosted. You can find this under the Frontend Integration section for your project.

  • Name
    displayWhileLoading
    Type
    string
    Description

    A React element to display while the AuthProvider is fetching auth information. Defaults to an empty element

  • Name
    displayIfLoggedOut
    Type
    string
    Description

    A React element to display if the current user is logged out. Defaults to <RedirectToLogin />

index.js

import { RequiredAuthProvider, RedirectToLogin } from "@propelauth/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <RequiredAuthProvider
        authUrl={process.env.REACT_APP_AUTH_URL}
        displayWhileLoading={<Loading />}
        displayIfLoggedOut={<RedirectToLogin />}
    >
        <YourApp />
    </RequiredAuthProvider>,
    document.getElementById("root")
);

withAuthInfo

withAuthInfo wraps a component and automatically adds auth information to the props of the component.

Arguments

  • Name
    Component *
    Type
    React.ComponentType<P extends WithAuthInfoProps>
    Description

    The component to wrap

  • Name
    options
    Type
    WithAuthInfoArgs
    Description

    Optional options for the wrapper. Currently, the only option is displayWhileLoading which is a React element to display while the AuthProvider is fetching auth information. Defaults to an empty element.


The following properties are added to the wrapped component's props:

Injected Properties

  • Name
    isLoggedIn
    Type
    boolean
    Description

    Whether the user is currently logged in

  • Name
    accessToken
    Type
    string
    Description

    The user's access token

  • Name
    user
    Type
    User
    Description

    The user's information (e.g. email address, name, user ID). See User for all the fields on the user

  • Name
    userClass
    Type
    UserClass
    Description

    Similar to User, but instead of just being a JSON object, this is a class with helper functions (e.g. getOrg, isImpersonating). See UserClass for all the fields and helper functions.

  • Name
    orgHelper
    Type
    OrgHelper
    Description

    A helper class for accessing the user's organization information. See OrgHelper for everything it can do.

  • Name
    accessHelper
    Type
    AccessHelper
    Description

    A helper class for accessing the user's roles and permissions. See AccessHelper for everything it can do.

  • Name
    isImpersonating
    Type
    boolean
    Description

    Whether the current user is being impersonated by someone else. See User Impersonation for more information.

  • Name
    impersonatorUserId
    Type
    string
    Description

    If the current user is being impersonated, this will be the user ID of the impersonator. See User Impersonation for more information.

  • Name
    refreshAuthInfo
    Type
    () => Promise<void>
    Description

    A function that will force refresh the current user's information. The library already refreshes this information automatically, so you should only use this if you need to force a refresh.

  • Name
    tokens
    Type
    Tokens
    Description

    A helper class for generating access tokens. See Tokens for more information.

Signature

import {withAuthInfo} from "@propelauth/react"

withAuthInfo(Component, {
    displayWhileLoading: <div>Loading...</div>
})

Example

const WelcomeMessage = withAuthInfo(props => {
    if (props.isLoggedIn) {
        return <div>Welcome, {props.user.email}!</div>
    } else {
        return <div>You aren't logged in</div>
    }
})

withRequiredAuthInfo

withRequiredAuthInfo wraps a component and automatically adds auth information to the props of the component. It will not render the wrapped component if the user is not logged in, instead, by default, it will redirect the user to the login page.

Arguments

  • Name
    Component *
    Type
    React.ComponentType<P extends WithLoggedInAuthInfoProps>
    Description

    The component to wrap

  • Name
    options
    Type
    WithRequiredAuthInfoArgs
    Description

    Optional options for the wrapper. There are two options:

    • displayIfLoggedOut - a React element to display if the user isn't logged in. Defaults to <RedirectToLogin />
    • displayWhileLoading - a React element to display while the AuthProvider is fetching auth information. Defaults to an empty element

The following properties are added to the wrapped component's props:

Injected Properties

  • Name
    accessToken
    Type
    string
    Description

    The user's access token

  • Name
    user
    Type
    User
    Description

    The user's information (e.g. email address, name, user ID). See User for all the fields on the user

  • Name
    userClass
    Type
    UserClass
    Description

    Similar to User, but instead of just being a JSON object, this is a class with helper functions (e.g. getOrg, isImpersonating). See UserClass for all the fields and helper functions.

  • Name
    orgHelper
    Type
    OrgHelper
    Description

    A helper class for accessing the user's organization information. See OrgHelper for everything it can do.

  • Name
    accessHelper
    Type
    AccessHelper
    Description

    A helper class for accessing the user's roles and permissions. See AccessHelper for everything it can do.

  • Name
    isImpersonating
    Type
    boolean
    Description

    Whether the current user is being impersonated by someone else. See User Impersonation for more information.

  • Name
    impersonatorUserId
    Type
    string
    Description

    If the current user is being impersonated, this will be the user ID of the impersonator. See User Impersonation for more information.

  • Name
    refreshAuthInfo
    Type
    () => Promise<void>
    Description

    A function that will force refresh the current user's information. The library already refreshes this information automatically, so you should only use this if you need to force a refresh.

  • Name
    tokens
    Type
    Tokens
    Description

    A helper class for generating access tokens. See Tokens for more information.

Signature

import {withRequiredAuthInfo} from "@propelauth/react"

withRequiredAuthInfo(Component, {
    displayWhileLoading: <div>Loading...</div>,
    displayIfLoggedOut: <RedirectToLogin />,
})

Example

const WelcomeMessage = withRequiredAuthInfo(props => {
    return <div>Welcome, {props.user.email}!</div>
})

useAuthInfo

AuthInfo is a React hook that returns the current user's information. It is similar to withAuthInfo, but instead of injecting the information into a component, it returns it from a hook.

Properties

  • Name
    loading
    Type
    boolean
    Description

    Whether the AuthProvider is currently fetching auth information. This should only be true initially when the page loads

  • Name
    isLoggedIn
    Type
    boolean
    Description

    Whether the user is currently logged in

  • Name
    accessToken
    Type
    string
    Description

    The user's access token

  • Name
    user
    Type
    User
    Description

    The user's information (e.g. email address, name, user ID). See User for all the fields on the user

  • Name
    userClass
    Type
    UserClass
    Description

    Similar to User, but instead of just being a JSON object, this is a class with helper functions (e.g. getOrg, isImpersonating). See UserClass for all the fields and helper functions.

  • Name
    orgHelper
    Type
    OrgHelper
    Description

    A helper class for accessing the user's organization information. See OrgHelper for everything it can do.

  • Name
    accessHelper
    Type
    AccessHelper
    Description

    A helper class for accessing the user's roles and permissions. See AccessHelper for everything it can do.

  • Name
    isImpersonating
    Type
    boolean
    Description

    Whether the current user is being impersonated by someone else. See User Impersonation for more information.

  • Name
    impersonatorUserId
    Type
    string
    Description

    If the current user is being impersonated, this will be the user ID of the impersonator. See User Impersonation for more information.

  • Name
    refreshAuthInfo
    Type
    () => Promise<void>
    Description

    A function that will force refresh the current user's information. The library already refreshes this information automatically, so you should only use this if you need to force a refresh.

  • Name
    tokens
    Type
    Tokens
    Description

    A helper class for generating access tokens. See Tokens for more information.

Signature

import {useAuthInfo} from "@propelauth/react"

const authInfo = useAuthInfo()

Example

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

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

useLogoutFunction

useLogoutFunction is a React hook that returns a function that will log the user out. It is most commonly used for creating a logout button.

The returned function takes a single argument which is whether or not to redirect the user to your pre-configured logout redirect URL. This defaults to false.

Signature

import {useLogoutFunction} from "@propelauth/react"

const logout = useLogoutFunction()
await logout(false)

Example

const LogoutButton = () => {
    const logout = useLogoutFunction()
    return <button onClick={() => logout(false)}>Logout</button>
}

useRedirectFunctions

useRedirectFunctions is a React hook that returns a collection of functions which redirect the user to useful locations. Each function takes in an optional options argument which can control features like where the user returns to after logging in.

If you need the underlying URL instead of redirecting, you can use the useHostedPageUrls hook instead.

Returned Functions

  • Name
    redirectToLoginPage
    Type
    (options?: RedirectToLoginOptions) => void
    Description

    Redirects the user to the login page. Additional options:

    • postLoginRedirectUrl - The URL to redirect the user to after they log in. Set the default in your Dashboard.
    • userSignupQueryParameters - Query parameters to add to the login URL.
  • Name
    redirectToSignupPage
    Type
    (options?: RedirectToSignupOptions) => void
    Description

    Redirects the user to the signup page. Additional options:

    • postSignupRedirectUrl - The URL to redirect the user to after they sign up. Set the default in your Dashboard.
    • userSignupQueryParameters - Query parameters to add to the signup URL.
  • Name
    redirectToAccountPage
    Type
    (options?: RedirectToAccountOptions) => void
    Description

    Redirects the user to the account page. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.
  • Name
    redirectToOrgPage
    Type
    (orgId?: string, options?: RedirectToOrgPageOptions) => void
    Description

    Redirects the user to the organization page for the given org ID. If an org ID is not provided, one is chosen automatically. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.
  • Name
    redirectToCreateOrgPage
    Type
    (options?: RedirectToCreateOrgOptions) => void
    Description

    Redirects the user to the create organization page. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.
  • Name
    redirectToSetupSAMLPage
    Type
    (orgId: string, options?: RedirectToSetupSAMLPageOptions) => void
    Description

    Redirects the user to a page to setup SAML for the given org ID. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.

Signature

import {useRedirectFunctions} from "@propelauth/react"

const {
    redirectToLoginPage, 
    redirectToSignupPage, 
    redirectToAccountPage,
    redirectToOrgPage,
    redirectToCreateOrgPage,
    redirectToSetupSAMLPage,
} = useRedirectFunctions()

redirectToLoginPage({
    postLoginRedirectUrl: window.location.href,
    userSignupQueryParameters: {
        "ref": "my-cool-blog-post"
    }
})

Example

const NavbarLoginButtons = withAuthInfo((props) => {
    const { redirectToLoginPage, redirectToSignupPage, redirectToAccountPage } = useRedirectFunctions()

    if (props.isLoggedIn) {
        return <img src={props.user.pictureUrl} onClick={() => redirectToAccountPage()} />
    } else {
        return <div>
            <button onClick={() => redirectToLoginPage()}>Login</button>
            <button onClick={() => redirectToSignupPage()}>Signup</button>
        </div>
    }
})

useHostedPageUrls

useHostedPageUrls is a React hook that returns a collection of functions which get URLs of useful locations. Each function takes in an optional options argument which can control features like where the user returns to after logging in.

Returned Functions

  • Name
    getLoginPageUrl
    Type
    (options?: RedirectToLoginOptions) => string
    Description

    Gets the URL of the login page. Additional options:

    • postLoginRedirectUrl - The URL to redirect the user to after they log in. Set the default in your Dashboard.
    • userSignupQueryParameters - Query parameters to add to the login URL.
  • Name
    getSignupPageUrl
    Type
    (options?: RedirectToSignupOptions) => string
    Description

    Gets the URL of the signup page. Additional options:

    • postSignupRedirectUrl - The URL to redirect the user to after they sign up. Set the default in your Dashboard.
    • userSignupQueryParameters - Query parameters to add to the signup URL.
  • Name
    getAccountPageUrl
    Type
    (options?: RedirectToAccountOptions) => string
    Description

    Gets the URL of the account page. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.
  • Name
    getOrgPageUrl
    Type
    (orgId?: string, options?: RedirectToOrgPageOptions) => string
    Description

    Gets the URL of the organization page for the given org ID. If an org ID is not provided, one is chosen automatically. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.
  • Name
    getCreateOrgPageUrl
    Type
    (options?: RedirectToCreateOrgOptions) => string
    Description

    Gets the URL of the create organization page. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.
  • Name
    getSetupSAMLPageUrl
    Type
    (orgId: string, options?: RedirectToSetupSAMLPageOptions) => string
    Description

    Gets the URL of a page to setup SAML for the given org ID. Additional options:

    • redirectBackToUrl - The URL to redirect the user to when they click the back button on the account page.

Signature

import {useHostedPageUrls} from "@propelauth/react"

const {
    getLoginPageUrl, 
    getSignupPageUrl, 
    getAccountPageUrl,
    getOrgPageUrl,
    getCreateOrgPageUrl,
    getSetupSAMLPageUrl,
} = useHostedPageUrls()

getLoginPageUrl({
    postLoginRedirectUrl: window.location.href,
    userSignupQueryParameters: {
        "ref": "my-cool-blog-post"
    }
})

Example

const NavbarLoginButtons = withAuthInfo((props) => {
    const { getLoginPageUrl, getSignupPageUrl, getAccountPageUrl } = useHostedPageUrls()
    if (props.isLoggedIn) {
        return <img src={props.user.pictureUrl} onClick={() => { window.location.href = getAccountPageUrl() }} />
    } else {
        return <div>
            <a href={getLoginPageUrl()}>Login</a>
            <a href={getSignupPageUrl()}>Signup</a>
        </div>
    }
})

RedirectToLogin

A React component that redirects the user to the login page. It's a helpful wrapper around the useRedirectFunctions hook, specifically for login.

Properties

  • Name
    postLoginRedirectUrl
    Type
    string
    Description

    The URL to redirect the user to after they log in. Set the default in your Dashboard.

  • Name
    userSignupQueryParameters
    Type
    object
    Description

    Query parameters to add to the login URL.

import {RedirectToLogin} from "@propelauth/react"

<RedirectToLogin 
    postLoginRedirectUrl={"https://app.example.com/somewhere-else"}
    userSignupQueryParameters={{
        "ref": "my-cool-blog-post"
    }}
/>

RedirectToSignup

A React component that redirects the user to the signup page. It's a helpful wrapper around the useRedirectFunctions hook, specifically for signup.

Properties

  • Name
    postSignupRedirectUrl
    Type
    string
    Description

    The URL to redirect the user to after they log in. Set the default in your Dashboard.

import {RedirectToSignup} from "@propelauth/react"

<RedirectToSignup 
    postLoginRedirectUrl={"https://app.example.com/somewhere-else"}
/>

User

This is the object that contains all the information about the current user. It is returned from withAuthInfo, withRequiredAuthInfo, and useAuthInfo.

Properties

  • Name
    userId
    Type
    string
    Description

    The user's unique ID

  • Name
    email
    Type
    string
    Description

    The user's email address

  • Name
    createdAt
    Type
    number
    Description

    The timestamp of when the user was created

  • Name
    firstName
    Type
    string | undefined
    Description

    The user's first name

  • Name
    lastName
    Type
    string | undefined
    Description

    The user's last name

  • Name
    username
    Type
    string | undefined
    Description

    The user's username

  • Name
    properties
    Type
    object | undefined
    Description

    Additional properties set on the user. See User Properties for more information.

  • Name
    pictureUrl
    Type
    string | undefined
    Description

    The URL of the user's profile picture

  • Name
    hasPassword
    Type
    boolean
    Description

    Whether the user has a password set. This will be false for users that signed up with a social provider (e.g. Google, Facebook), magic link, or SAML.

  • Name
    hasMfaEnabled
    Type
    boolean
    Description

    Whether the user has 2FA authentication enabled

  • Name
    canCreateOrgs
    Type
    boolean
    Description

    Whether the user can create organizations

  • Name
    legacyUserId
    Type
    string | undefined
    Description

    The user's legacy user ID. This is only set if you migrated from an external source. See Migrating Users for more information.

  • Name
    impersonatorUserId
    Type
    boolean
    Description

    If the current user is being impersonated, this will be the ID of the impersonator. See User Impersonation for more information.

UserClass

Similar to User, but instead of just being a JSON object, this is a class with helper functions (e.g. getOrg, isImpersonating).

It is returned from withAuthInfo, withRequiredAuthInfo, and useAuthInfo.

Properties

In addition to all the properties on User, this contains:

  • Name
    getOrg
    Type
    (orgId: string) => OrgMemberInfoClass | undefined
    Description

    Returns the OrgMemberInfoClass for the given org ID

  • Name
    getOrgByName
    Type
    (orgName: string) => OrgMemberInfoClass | undefined
    Description

    Returns the OrgMemberInfoClass for the given org name

  • Name
    getUserProperty
    Type
    (key: string) => unknown | undefined
    Description

    Returns the value of a user property. See User Properties for more information.

  • Name
    getOrgs
    Type
    () => OrgMemberInfoClass[]
    Description

    Returns all orgs that the user is a member of

  • Name
    isImpersonating
    Type
    () => boolean
    Description

    Whether the current user is being impersonated by someone else. See User Impersonation for more information.

  • Name
    isRole
    Type
    (orgId: string, role: string) => boolean
    Description

    Whether the user has the given role in the given org

  • Name
    isAtLeastRole
    Type
    (orgId: string, role: string) => boolean
    Description

    Whether the user has at least the given role in the given org

  • Name
    hasPermission
    Type
    (orgId: string, permission: string) => boolean
    Description

    Whether the user has the given permission in the given org

  • Name
    hasAllPermissions
    Type
    (orgId: string, permissions: string[]) => boolean
    Description

    Whether the user has all the given permissions in the given org

Example

Example

const WelcomeMessage = withRequiredAuthInfo(({userClass}) => {
    return <div>
        Welcome, {userClass.firstName}!
        {userClass.isImpersonating() && 
            <div>You are being impersonated by {userClass.impersonatorUserId}</div>
        }
    </div>
})

OrgMemberInfoClass

Similar to OrgMemberInfo, but instead of just being a JSON object, this is a class with helper functions (e.g. isRole, hasPermission). It is returned from functions on the UserClass like UserClass.getOrg and UserClass.getOrgByName.

Properties

  • Name
    orgId
    Type
    string
    Description

    The ID of the organization

  • Name
    orgName
    Type
    string
    Description

    The name of the organization

  • Name
    urlSafeOrgName
    Type
    string
    Description

    The URL-safe name of the organization

  • Name
    orgMetadata
    Type
    object
    Description

    A JSON blob of the org's metadata

  • Name
    userAssignedRole
    Type
    string
    Description

    The role of the user within this organization

  • Name
    userInheritedRolesPlusCurrentRole
    Type
    string[]
    Description

    The role of the user within this organization plus each inherited role

  • Name
    userPermissions
    Type
    string[]
    Description

    The permissions of the user within this organization

  • Name
    isRole
    Type
    (role: string) => boolean
    Description

    Whether the user has the given role in this organization

  • Name
    isAtLeastRole
    Type
    (role: string) => boolean
    Description

    Whether the user has at least the given role in this organization

  • Name
    hasPermission
    Type
    (permission: string) => boolean
    Description

    Whether the user has the given permission in this organization

  • Name
    hasAllPermissions
    Type
    (permissions: string[]) => boolean
    Description

    Whether the user has all the given permissions in this organization

  • Name
    orgRoleStructure
    Type
    string
    Description

    The role structure set for your project. See multi roles per user for more information.

  • Name
    userAssignedAdditionalRoles
    Type
    string[]
    Description

    If using multiple roles per user, returns an array of roles that the user belongs to. Excludes the userAssignedRole.

const org = userClass.getOrg("my-org-id")
const isAdmin = org?.isRole("Admin")
if (isAdmin) {
    console.log("User is an admin in", org.orgName)
}

OrgHelper

OrgHelper is a helper class for accessing the user's organization information. It is returned from withAuthInfo, withRequiredAuthInfo, and useAuthInfo.

You can also access it directly from useOrgHelper if you don't need the other user information.

Signature

type OrgHelper = {
    // returns all orgs that the user is a member of
    getOrgs: () => OrgMemberInfo[],
    // returns all org ids that the user is a member of
    getOrgIds: () => string[],
    // returns org information for a given orgId
    getOrg: (orgId: string) => OrgMemberInfo | undefined,
    // returns org information for a given org by name
    getOrgByName: (orgName: string) => OrgMemberInfo | undefined,
}

type OrgMemberInfo = {
    orgId: string,
    orgName: string,
    urlSafeOrgName: string
    // The role of the user within this organization
    userAssignedRole: string
    userPermissions: string[]
}

Example

Org List

const OrgList = withRequiredAuthInfo(({orgHelper}) => {
    return <ul>
        {orgHelper.getOrgs().map(org => {
            return <li key={org.orgId}>
                {org.orgName}
            </li>
        })}
    </div>
})

AccessHelper

A helper class for accessing the user's roles and permissions. It is returned from withAuthInfo, withRequiredAuthInfo, and useAuthInfo.

Properties

  • Name
    isRole
    Type
    (orgId: string, role: string) => boolean
    Description

    Whether the user has the given role in the given org

  • Name
    isAtLeastRole
    Type
    (orgId: string, role: string) => boolean
    Description

    Whether the user has at least the given role in the given org

  • Name
    hasPermission
    Type
    (orgId: string, permission: string) => boolean
    Description

    Whether the user has the given permission in the given org

  • Name
    hasAllPermissions
    Type
    (orgId: string, permissions: string[]) => boolean
    Description

    Whether the user has all the given permissions in the given org

Example

Sidebar

const Sidebar = withRequiredAuthInfo(({accessHelper}) => {
    // We're using the router here to get the current orgId
    const router = useRouter()
    const orgId = router.query.orgId as string

    // Only Admins can see the billing page, so hide it from the sidebar
    const isAdmin = accessHelper.isAtLeastRole(orgId, "Admin")
    return <div>
        <div>Dashboard</div>
        <div>Reports</div>
        {isAdmin && <div>Billing</div>}
    </div>
})

Tokens

A helper class for generating access tokens.

Properties

  • Name
    getAccessTokenForOrg
    Type
    (orgId) => Promise<AccessTokenForActiveOrg>
    Description

    A function that will return an access token that only includes the metadata for the provided org, as well as the user's metadata. Recommended for use with Active Org or to shorten the length of the access token.

  • Name
    getAccessToken
    Type
    () => Promise<string | undefined>
    Description

    A function that will return the most up to date access token. This is great to use in components where the access token would otherwise not be updated until the component is rendered again.

Example

import {useAuthInfo} from "@propelauth/react";

const orgId = // get orgId from somewhere

async function getOrgAccessToken(orgId) {
    const authInfo = useAuthInfo();
    const orgAccessToken = await authInfo.tokens.getAccessTokenForOrg(orgId);
    return orgAccessToken
}