스밋 - 회원가입, 로그인, 로그아웃 구현하기

supabase Docs를 많이 참고하자. 

1. 검색하여 시도

-- public.user에 function 추가
create function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = ''
as $$
begin
  insert into public.user (id, email, name)
  values (new.id, new.email, new.raw_user_meta_data ->> 'name');
  return new;
end;
$$;

-- auth.users에 trigger 추가
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

 

supabase SQL에 이 코드를 넣고 Run을 돌림.

{"component":"api","error":"failed to close prepared statement: ERROR: current transaction is aborted, commands ignored until end of transaction block (SQLSTATE 25P02): ERROR: relation \"public.buddies\" does not exist (SQLSTATE 42P01)","level":"error","method":"POST","msg":"500: Database error saving new user","path":"/signup","referer":"http://localhost:3000/","remote_addr":"49.142.42.60","request_id":"8d6ae64c90b43280-ICN","time":"2024-10-22T16:35:16Z"}

Database error saving new user

 

여러 오류가 뜸.

오류를 여러 개 검색하던 도중 오류 로그가 있다는 걸 확인함. 트리거, 펑션이 이미 있다는 오류가 많아서 트리거와 펑션을 다 찾아서 삭제하기로 했다. 

근데 삭제가 안된다!

그래서 또 검색해서 펑션 삭제하니까 지워졌다.

다시

-- public.user에 function 추가
create function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = ''
as $$
begin
  insert into public.user (id, email, name)
  values (new.id, new.email, new.raw_user_meta_data ->> 'name');
  return new;
end;
$$;

-- auth.users에 trigger 추가
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

하니까 연결된다. ㅠㅠㅠㅠㅠㅠㅠ

로직은 어렵지 않게 구현했다.

 

- 회원가입

"use client";

import supabase from "../../utils/supabase/client";
import { FormEvent, useState } from "react";

export default function SignupPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSignUp = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { data, error } = await supabase.auth.signUp({
      email: email,
      password: password,
    });
    if (error) {
      console.error("SignUp Error :", error);
    } else {
      console.log("회원가입 완료", data);
    }
  };

  return (
    <form onSubmit={(e) => handleSignUp(e)}>
      <input
        type="email"
        placeholder="이메일"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="비밀번호"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button>회원가입</button>
    </form>
  );
}

 

 - 로그인, 로그아웃

"use client";

import supabase from "../../utils/supabase/client";
import { useState } from "react";

export default function LoginPage() {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [isLogIn, setIsLogIn] = useState(false);

  const handleSignIn = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const { data, error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });
    if (error) {
      console.error("SignIn Error :", error);
    } else {
      console.log("로그인 완료", data);
      setIsLogIn(false);
    }
  };

  const handleLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const { error: logoutError } = await supabase.auth.signOut();

    if (logoutError) {
      console.error("SignUp Error :", logoutError);
    } else {
      console.log("로그아웃 완료");
      setIsLogIn(true);
    }
  };

  return (
    <form>
      <input
        type="email"
        placeholder="이메일"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="비밀번호"
        onChange={(e) => setPassword(e.target.value)}
      />
      {isLogIn ? (
        <button onClick={(e) => handleSignIn(e)}>로그인</button>
      ) : (
        <button onClick={(e) => handleLogout(e)}>로그아웃</button>
      )}
    </form>
  );
}

 

타입 오류가 나서 챗지피티한테 물어봤다.

하니까 해결.

 

정말 길~었다. 근데 헤맨 만큼 SQL에 좀 더 잘 알게 되긴 했음. ㅋㅋ

주변 사람과 이야기하면서 하는 게 도움이 많이 된다는 것을 알았다.

 

 

 

참고자료

https://velog.io/@39busy/supabase-auth

[supabase] Supabase 이메일 로그인/회원가입 with Next.js

https://github.com/orgs/supabase/discussions/13043

Database error saving new user · supabase · Discussion #13043