Skip to main content

Authorization: UI Elements

Using session data in pages​

At some point you will want to access user data from the WithWine API in your pages, you can implement the withWithWineSessionSsr HOF on the getServerSideProps method, then you can access user data when fetching from the WithWine API by supplying the appropriate headers in your fetch. To make this as simple as possible we've included a withWineFetchHeaders method that will do this for you in a secure manner. You can spread the result of this method onto the headers object that you pass into your fetch.

./pages/example.tsx
import { withWineFetchHeaders } from '@withwine/sdk';
import { withWithWineSessionSsr } from '@withwine/sdk/next';

export default function Example({ data }) {
  ...
}

/**
 * Example of Next.js getServerSideProps wrapped by the `withWithWineSessionSsr`
 * higher order function. The fetch in this method uses the WithWine SDK
 * `withWineFetchHeaders` method to get the headers required to make requests to
 * the WithWine API.
 */
export const getServerSideProps = withWithWineSessionSsr(async function (
  context: any,
) {
  try {
    const res = await fetch('/withwine/api/endpoint/to/call', {
      headers: {
        ...withWineFetchHeaders(context.req),
      },
    });
    const data = await res.json();
    if (!res.ok) {
      if (data.errorMessage) {
        throw new Error(data.errorMessage);
      }
    }
    return {
      props: { data },
    };
  } catch (error) {
    return {
      props: { data: { message: (error as Error).message } },
    };
  }
}) as any;

Accessing user data with the useUser hook​

The WithWine SDK exposes a useUser hook that can be added to the client side code where you wish to access the state of the user, i.e. see if the user is logged in, get the user name etc.. This hook calls the /api/withwine/user API route.

Under the hood the useUser hook uses SWR, the hook returns a user object and mutateUser method for Local mutation (Optimistic UI).

./Components/Header.tsx
import Link from 'next/link';
import { useUser } from '@withwine/sdk/next-client';

export default function Header() {
  const { user } = useUser();
  return (
    <header>
      <nav>
        <ul>
          {!user?.isLoggedIn ? (
            <>
              <li>
                <Link href="/api/withwine/login" legacyBehavior>
                  <a>Login</a>
                </Link>
              </li>
              <li>
                <Link
                  href="/api/withwine/login?loginInfo=register"
                  legacyBehavior
                >
                  <a>Register</a>
                </Link>
              </li>
            </>
          ) : (
            <li>
              <Link href="/api/withwine/logout" legacyBehavior>
                <a>Logout {user.name}</a>
              </Link>
            </li>
          )}
        </ul>
      </nav>
    </header>
  );
}
note

The above samples show both direct API route access and redirect based links as dicussed in in the previous section on redirects.