Client Component Hooks

Hooks in this section are only useable in Next.js client side components

useUser

useUser is a React hook that returns information about the current user. See User for more information.

Return Value

  • Name
    loading
    Type
    boolean
    Description

    Whether or not the user's information is loading. This will only be true on the first render.

  • Name
    isLoggedIn
    Type
    boolean
    Description

    Whether or not the user is logged in.

  • Name
    user
    Type
    User | undefined
    Description

    The User object. This will be undefined if the user is not logged in.

  • Name
    accessToken
    Type
    string | undefined
    Description

    An access token for the user that can be used to make requests to your backend. This can be useful for making requests to other backends outside of Next.js.

  • Name
    setActiveOrg
    Type
    (orgId: string) => UserFromToken
    Description

    A function to set the user's Active Org. Accepts an org ID as an argument.

Example

"use client";

import {useUser} from "@propelauth/nextjs/client";

const WelcomeMessage = () => {
    const {loading, user} = useUser()
    if (loading) {
        return <div>Loading...</div>
    } else if (user) {
        return <div>Hello {user.email}!</div>
    } else {
        return <div>Please log in to be welcomed</div>
    }
}

useLogoutFunction

A React hook that returns a function that logs the user out.

LogoutButton.tsx

"use client"

import {useLogoutFunction} from "@propelauth/nextjs/client";

export default function LogoutButton() {
	const logoutFn = useLogoutFunction()
	return <button onClick={logoutFn}>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:

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

    Redirects the user to the signup page. Additional options:

    • postSignupRedirectPath - The URL to redirect the user to after they sign up. Set the default in your Dashboard.
    • userSignupQueryParameters - Query parameters to be used with user insights.
  • Name
    redirectToAccountPage
    Type
    () => void
    Description

    Redirects the user to the account page. Additional options:

    • redirectBackToUrl - The URL to redirect the user back to if they were to click back in the account pages.
  • Name
    redirectToOrgPage
    Type
    (orgId?: string) => 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 back to if they were to click back in the account pages.
  • Name
    redirectToOrgSettingsPage
    Type
    (orgId?: string) => void
    Description

    Redirects the user to the organization settings 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 back to if they were to click back in the account pages.
  • Name
    redirectToCreateOrgPage
    Type
    () => void
    Description

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

    • redirectBackToUrl - The URL to redirect the user back to if they were to click back in the account pages.
  • Name
    redirectToSetupSAMLPage
    Type
    (orgId?: string) => void
    Description

    Redirects the user to the organization SAML setup 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 back to if they were to click back in the account pages.
  • Name
    redirectToOrgApiKeysPage
    Type
    (orgId?: string) => void
    Description

    Redirects the user to the organization API Keys 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 back to if they were to click back in the account pages.

Signature

"use client";

import {useRedirectFunctions} from "@propelauth/nextjs/client"

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

redirectToLoginPage({
    postLoginRedirectPath: window.location.href,
})

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.
  • 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.
  • Name
    getAccountPageUrl
    Type
    () => string
    Description

    Gets the URL of the account page. Additional options:

    • redirectBackToUrl - The URL to redirect the user back to if they were to click back in the account pages.
  • Name
    getOrgPageUrl
    Type
    (orgId?: string) => 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 back to if they were to click back in the account pages.
  • Name
    getOrgSettingsPageUrl
    Type
    (orgId?: string) => string
    Description

    Gets the URL of the organization's settings 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 back to if they were to click back in the account pages.
  • Name
    getCreateOrgPageUrl
    Type
    () => string
    Description

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

    • redirectBackToUrl - The URL to redirect the user back to if they were to click back in the account pages.
  • Name
    getSetupSAMLPageUrl
    Type
    (orgId?: string) => string
    Description

    Gets the URL of the organization's SAML setup 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 back to if they were to click back in the account pages.

Signature

"use client";

import {useHostedPageUrls} from "@propelauth/nextjs/client"

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

getLoginPageUrl({
    postLoginRedirectUrl: window.location.href,
})

useRefreshAuth

A React hook that returns a function that refreshes the user's information. This is unnecessary in most cases, as the AuthProvider will automatically refresh the user's information periodically and on key events, but it can be useful in some cases. It returns a user object, if the user is logged in. Otherwise, it returns undefined.

Signature

"use client";

const refreshAuth = useRefreshAuth()
const user = await refreshAuth()
if (user) {
    console.log("You are logged in as", user.email)
} else {
    console.log("You are not logged in")
}