Options
All
  • Public
  • Public/Protected
  • All
Menu

Module frontend/use-user

Index

Client Interfaces

Client Type aliases

Properties

Client Type aliases

UseUser

UseUser: () => UserContext

The useUser hook, which will get you the UserProfile object from the server-side session by requesting it from the HandleProfile API Route handler.

// pages/profile.js
import Link from 'next/link';
import { useUser } from '@auth0/nextjs-auth0';

export default function Profile() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;
  if (!user) return <Link href="/api/auth/login"><a>Login</a></Link>;
  return <div>Hello {user.name}, <Link href="/api/auth/logout"><a>Logout</a></Link></div>;
}

Type declaration

    • (): UserContext
    • Returns UserContext

UserContext

UserContext: { checkSession: () => Promise<void>; error?: Error; isLoading: boolean; user?: UserProfile }

The user context returned from the {@link useUser} hook.

Type declaration

  • checkSession: () => Promise<void>
      • (): Promise<void>
      • Returns Promise<void>

  • Optional error?: Error
  • isLoading: boolean
  • Optional user?: UserProfile

UserProvider

UserProvider: (props: UserProviderProps) => ReactElement<UserContext>

To use the {@link useUser} hook. You must wrap your application in a <UserProvider> component.

Type declaration

UserProviderProps

UserProviderProps: React.PropsWithChildren<{ fetcher?: UserFetcher; profileUrl?: string; user?: UserProfile } & ConfigContext>

Configure the UserProvider component.

If you have any server-side rendered pages (eg. using getServerSideProps), you should get the user from the server side session and pass it to the <UserProvider> component via pageProps - this will refill the {@link useUser} hook with the UserProfile object. eg

// pages/_app.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  // If you've used `withPageAuthRequired`, pageProps.user can pre-populate the hook
  // if you haven't used `withPageAuthRequired`, pageProps.user is undefined so the hook
  // fetches the user from the API route
  const { user } = pageProps;

  return (
    <UserProvider user={user}>
      <Component {...pageProps} />
    </UserProvider>
  );
}

If you have used a custom url for your HandleProfile API Route handler (the default is /api/auth/me) then you should specify it here in the profileUrl option.

Properties

default

default: (__namedParameters: PropsWithChildren<{ fetcher?: undefined | UserFetcher; profileUrl?: undefined | string; user?: undefined | UserProfile } & ConfigContext>) => ReactElement<UserContext, string | ((props: any) => null | ReactElement<any, any>) | ((props: any) => Component<any, any, any>)>

Type declaration

    • (__namedParameters: PropsWithChildren<{ fetcher?: undefined | UserFetcher; profileUrl?: undefined | string; user?: undefined | UserProfile } & ConfigContext>): ReactElement<UserContext, string | ((props: any) => null | ReactElement<any, any>) | ((props: any) => Component<any, any, any>)>
    • Parameters

      • __namedParameters: PropsWithChildren<{ fetcher?: undefined | UserFetcher; profileUrl?: undefined | string; user?: undefined | UserProfile } & ConfigContext>

      Returns ReactElement<UserContext, string | ((props: any) => null | ReactElement<any, any>) | ((props: any) => Component<any, any, any>)>