Skip to content

CreateServerComponentClient

Supabase:Auth 의 Server-Side Component 에서 사용하는 Client Helper.

Usage 

const cookieStore = cookies();
const supabase = createServerComponentClient({cookies: () => cookieStore});
const user = await supabase.auth.getUser();
const hasSession = user.error === null;
if (hasSession) {
  console.debug(user.data.user);
}

참고로 출력 결과는 다음과 같은 느낌이다: 

{
  id: '74f3ec8f-80a6-429d-8034-616975cacba0',
  aud: 'authenticated',
  role: 'authenticated',
  email: '[email protected]',
  email_confirmed_at: '2022-01-01T00:00:00.000000Z',
  phone: '',
  confirmation_sent_at: '2022-01-01T00:00:00.000000Z',
  confirmed_at: '2022-01-01T00:00:00.000000Z',
  last_sign_in_at: '2022-01-01T00:00:00.000000Z',
  app_metadata: { provider: 'email', providers: [ 'email' ] },
  user_metadata: {},
  identities: [
    {
      id: '74f3ec8f-80a6-429d-8034-616975cacba0',
      user_id: '74f3ec8f-80a6-429d-8034-616975cacba0',
      identity_data: [Object],
      provider: 'email',
      last_sign_in_at: '2022-01-01T00:00:00.000000Z',
      created_at: '2022-01-01T00:00:00.000000Z',
      updated_at: '2022-01-01T00:00:00.000000Z'
    }
  ],
  created_at: '2022-01-01T00:00:00.000000Z',
  updated_at: '2022-01-01T00:00:00.000000Z'
}

Example 

import Link from 'next/link';
import {cookies} from 'next/headers';
import React from 'react';
import Logo from '@/app/components/logo';
import useTranslation from '@/app/lib/i18n/server';
import {createServerComponentClient} from '@supabase/auth-helpers-nextjs';

export default async function RootLngPage({params: {lng}}: {params: {lng: string}}) {
  const cookieStore = cookies();
  const supabase = createServerComponentClient({cookies: () => cookieStore});
  const {t} = await useTranslation(lng, 'root');
  const user = await supabase.auth.getUser();
  const hasSession = user.error === null;

  let navbarItems: React.JSX.Element;
  if (hasSession) {
    console.debug(user.data.user);
    navbarItems = <React.Fragment>
      <p>{user.data.user?.email}</p>
    </React.Fragment>;
  } else {
    navbarItems = (
      <React.Fragment>
        <li>
          {!hasSession && (
            <Link className="font-bold" href={`/${lng}/signin`}>
              {t('signin')}
            </Link>
          )}
        </li>
      </React.Fragment>
    );
  }

  return (
    <main>
      <div className="navbar bg-base-100">
        <div className="flex-1">
          <Link href={`/${lng}/`} hrefLang={lng}>
            <Logo height="1em" />
          </Link>
        </div>

        <div className="flex-none">
          <ul className="menu menu-horizontal px-1">{navbarItems}</ul>
        </div>
      </div>

      <div className="hero min-h-screen bg-base-200">
        <div className="hero-content text-center">
          <div className="max-w-md">
            <h1 className="text-5xl font-bold">{t('title')}</h1>
            <p className="py-6">{t('abstractor')}</p>
            <Link href={`/${lng}/main`} className="btn btn-primary">
              {t('start')}
            </Link>
          </div>
        </div>
      </div>
    </main>
  );
}

See also