Next.js Pages Router - Client Component Hooks - PropelAuth Docs

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

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

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

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";
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")
}