# Client Component Hooks

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

## [useUser](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/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/nextjspages/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/nextjspages/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/nextjspages/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/nextjspages/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. 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.
    - **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.
    - **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.
    - **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.
    - **redirectBackToUrl** - The URL to redirect the user back to if they were to click back in the account pages.

### Signature

```jsx
"use client";

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

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

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

* * *

## [useHostedPageUrls](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/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. 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.
  - **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.
  - **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.
  - **redirectBackToUrl** - The URL to redirect the user back to if they were to click back in the account pages.

### 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/nextjspages/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/nextjspages/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. It returns a [user](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/user-orgmemberinfo#user-object) object, if the user is logged in. Otherwise, it returns undefined.

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

* * *