const supabase = createServerComponentClient({ cookies })

  const token = await supabase.auth.getSession();

  console.log(token);

{
  "aud": "authenticated",
  "exp": 1689956112,
  "iat": 1689952512,
  "iss": "https://https://xxxxxxx.supabase.co/auth/v1",
  "sub": "UUIDv4形式",
  "email": "keita@exmple.com",
  "phone": "",
  "app_metadata": {
    "provider": "email",
    "providers": [
      "email"
    ]
  },
  "user_metadata": {},
  "role": "authenticated",
  "aal": "aal1",
  "amr": [
    {
      "method": "password",
      "timestamp": 1689952512
    }
  ],
  "session_id": "UUIDv4形式"
}

npx create-next-app -e with-supabase

'use client';

import { SubmitButton } from '@/app/login/submit-button';
import { type FormEvent, useEffect, useState } from 'react';

export const NewPasswordForm = () => {
  const [refreshToken, setRefreshToken] = useState<string>('');

  useEffect(() => {
    if (typeof window !== 'undefined' && window.location.hash) {
      // Remove the leading #
      const urlParams = new URLSearchParams(window.location.hash.substring(1));
      const extractedRefreshToken = urlParams.get('refresh_token');
      if (extractedRefreshToken != null) {
        setRefreshToken(extractedRefreshToken as string);
      }
    }
  }, []);

  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const password = new FormData(event.currentTarget).get('password') as string;

    if (password !== '' && refreshToken !== '') {
      const createPasswordResponse = await fetch('http://localhost:24000/auth/password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ refreshToken, password }),
      });

      const createPasswordResponseBody = (await createPasswordResponse.json()) as {
        isSuccess: boolean;
        user?: {
          email: string;
        };
        errorMessage?: string;
      };

      // TODO パスワードリセットに失敗した場合のエラーハンドリングを追加する

      const email = createPasswordResponseBody.user?.email;
      if (email != null && typeof window !== 'undefined') {
        const loginResponse = await fetch('http://localhost:24000/auth/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ email, password }),
        });

        const responseBody = (await loginResponse.json()) as { loginSuccess: boolean; errorMessage?: string };

        if (responseBody.loginSuccess) {
          window.location.href = 'http://localhost:24000/protected';
        }
        // TODO ログイン失敗時のエラーハンドリングを考える
      }
    }
  };

  return (
    <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
      <form className="animate-in flex-1 flex flex-col w-full justify-center gap-2 text-foreground" onSubmit={onSubmit}>
        <label className="text-md" htmlFor="password">
          Password
        </label>
        <input
          className="rounded-md px-4 py-2 bg-inherit border mb-6"
          type="password"
          name="password"
          placeholder="••••••••"
          required
        />
        <SubmitButton
          className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2"
          pendingText="パスワードを設定中..."
        >
          パスワードを設定
        </SubmitButton>
      </form>
    </div>
  );
};

import { createClient } from '@/utils/supabase/server';
import { NextResponse } from 'next/server';

export const runtime = 'edge';

type RequestBody = {
  refreshToken: string;
  password: string;
};

type ResponseBody = {
  isSuccess: boolean;
  user?: {
    email: string;
  };
  errorMessage?: string;
};

export async function POST(request: Request) {
  const requestBody = (await request.json()) as RequestBody;

  const supabase = createClient();

  await supabase.auth.refreshSession({ refresh_token: requestBody.refreshToken });

  const { data, error } = await supabase.auth.updateUser({
    password: requestBody.password,
  });

  const email = data.user?.email;
  if (email && error == null) {
    const status = 200;

    const responseBody = {
      isSuccess: true,
      user: {
        email,
      },
    } as const satisfies ResponseBody;

    return NextResponse.json(responseBody, { status });
  }

  const status = 500;

  const responseBody = {
    isSuccess: false,
    errorMessage: 'failed to set password',
  } as const satisfies ResponseBody;

  return NextResponse.json(responseBody, { status });
}

import { createClient } from '@/utils/supabase/server';
import { NextResponse } from 'next/server';

export const runtime = 'edge';

type RequestBody = {
  email: string;
  password: string;
};

type ResponseBody = {
  loginSuccess: boolean;
  errorMessage?: string;
};

export async function POST(request: Request) {
  const requestBody = (await request.json()) as RequestBody;

  const supabase = createClient();

  const { error } = await supabase.auth.signInWithPassword({
    email: requestBody.email,
    password: requestBody.password,
  });

  if (error) {
    const status = 500;

    const responseBody = {
      loginSuccess: false,
      errorMessage: 'failed to login',
    } as const satisfies ResponseBody;

    return NextResponse.json(responseBody, { status });
  }

  const status = 200;

  const responseBody = {
    loginSuccess: true,
  } as const satisfies ResponseBody;

  return NextResponse.json(responseBody, { status });
}

import { headers } from 'next/headers';

  const signIn = async (formData: FormData) => {
    'use server';

    const email = formData.get('email') as string;
    const supabase = createClient();

    const { error } = await supabase.auth.signInWithOtp({
      email,
      options: {
        emailRedirectTo: `${headers().get('origin')}/auth/callback`,
      },
    });
    // 省略
  };

export const appUrl = (): string => {
  if (process.env.NEXT_PUBLIC_VERCEL_URL) {
    return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
  }

  return 'http://localhost:24000';
};

npm install supabase --save-dev

./node_modules/.bin/supabase migration new create_triggers_functions_refresh_updated_at
./node_modules/.bin/supabase migration new create_table_users
./node_modules/.bin/supabase migration new create_triggers_on_users

CREATE FUNCTION refresh_updated_at_step1() RETURNS trigger AS
$$
BEGIN
  IF NEW.updated_at = OLD.updated_at THEN
    NEW.updated_at := NULL;
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE FUNCTION refresh_updated_at_step2() RETURNS trigger AS
$$
BEGIN
  IF NEW.updated_at IS NULL THEN
    NEW.updated_at := OLD.updated_at;
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE FUNCTION refresh_updated_at_step3() RETURNS trigger AS
$$
BEGIN
  IF NEW.updated_at IS NULL THEN
    NEW.updated_at := CURRENT_TIMESTAMP;
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TABLE users(
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP
);

CREATE TRIGGER refresh_users_updated_at_step1
    BEFORE UPDATE ON users FOR EACH ROW
    EXECUTE PROCEDURE refresh_updated_at_step1();
CREATE TRIGGER refresh_users_updated_at_step2
    BEFORE UPDATE OF updated_at ON users FOR EACH ROW
    EXECUTE PROCEDURE refresh_updated_at_step2();
CREATE TRIGGER refresh_users_updated_at_step3
    BEFORE UPDATE ON users FOR EACH ROW
    EXECUTE PROCEDURE refresh_updated_at_step3();

SELECT grantee, table_name, privilege_type
FROM information_schema.role_table_grants
WHERE table_schema = 'public'
ORDER BY grantee, table_name, privilege_type;

REVOKE all privileges
ON all tables
IN SCHEMA public
FROM anon;

ALTER DEFAULT privileges IN SCHEMA public REVOKE all ON tables FROM anon;
ALTER DEFAULT privileges IN SCHEMA public REVOKE all ON functions FROM anon;
ALTER DEFAULT privileges IN SCHEMA public REVOKE all ON sequences FROM anon;

GRANT SELECT ON posts TO anon;