Client Component Hooks

Hooks in this section are only usable 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.

Returned Functions

• Name redirectToLoginPage
  • Type (options?: RedirectToLoginOptions) => void
  • Description Redirects the user to the login page.
• Name redirectToSignupPage
  • Type (options?: RedirectToSignupOptions) => void
  • Description Redirects the user to the signup page.
• Name redirectToAccountPage
  • Type () => void
  • Description Redirects the user to the account page.
• Name redirectToOrgPage
  • Type (orgId?: string) => void
  • Description Redirects the user to the organization page for the given org ID.
• Name redirectToOrgSettingsPage
  • Type (orgId?: string) => void
  • Description Redirects the user to the organization settings page for the given org ID.

Signature

"use client";

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

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

redirectToLoginPage({
    postLoginRedirectPath: "/dashboard",
})

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.
• Name getSignupPageUrl
  • Type (options?: RedirectToSignupOptions) => string
  • Description Gets the URL of the signup page.
• Name getAccountPageUrl
  • Type () => string
  • Description Gets the URL of the account page.

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.

Signature

"use client";
import { useRefreshAuth } from '@propelauth/nextjs/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")
}