# Client Component Hooks

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

## [useUser](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/client-component-hooks\#use-user)

`useUser` is a React hook that returns information about the current user. See [User](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/user-orgmemberinfo#user-object) 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](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/user-orgmemberinfo#user-object) 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](https://docs.propelauth.com/recipes/active-org). Accepts an org ID as an argument.

### Example

```tsx
"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](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/client-component-hooks\#use-logout-function)

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

### LogoutButton.tsx

```tsx
"use client"

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

export default function LogoutButton() {
    const logoutFn = useLogoutFunction()
    return <button onClick={logoutFn}>Logout</button>
}
```

## [useRedirectFunctions](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/client-component-hooks\#use-redirect-functions)

`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

```jsx
"use client";

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

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

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

## [useHostedPageUrls](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/client-component-hooks\#use-hosted-page-urls)

`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

```jsx
"use client";

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

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

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

## [useRefreshAuth](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/client-component-hooks\#use-refresh-auth)

A React hook that returns a function that refreshes the user's information. This is unnecessary in most cases, as the [AuthProvider](https://docs.propelauth.com/reference/fullstack-apis/nextjsapp/installation-and-setup#auth-provider) will automatically refresh the user's information periodically and on key events, but it can be useful in some cases.

### Signature

```tsx
"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")
}
```