Logo
Frontend
Backend 

  • Backend Libraries

  • APIs

  • Frontend Libraries

  • Fullstack Libraries

    • Remix

  • Backend Libraries

  • Sign in

    • 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.
    • 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.
    • 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. If an org ID is not provided, one is chosen automatically.

    • Name
      redirectToCreateOrgPage
      Type
      () => void
      Description

      Redirects the user to the create organization page.

    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.

    • 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.

    • Name
      getCreateOrgPageUrl
      Type
      () => string
      Description

      Gets the URL of the create organization 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. 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")
}