백엔드/Supabase

버킷 생성1) Storage > New bucket 클릭2) 버킷 이름 입력 후 공개 버킷 설정(주의 : 공개 버킷 설정 시 익명의 사용자가 아무런 승인 없이 버킷 내 객체(이미지 파일)을 읽을 수 있으므로 보안 수준이 낮아지는 것을 유의해야합니다.) 버킷 정책 설정1) Policies > 생성된 버킷명 우측 New policy 클릭2) For full customization 클릭3) Policy name 입력, Allowed operation 설정 후  Review 클릭4) 생성될 정책을 미리본 후 Save policy 클릭 실습import React, { useState } from 'react';const FileInputForm = () => { const [file, setFile] = us..

카카오톡 디벨로퍼 세팅1. 로그인 및 어플리케이션 생성1) 카카오 디벨로퍼 로그인 2) '내 애플리케이션' 클릭3) '애플리케이션 추가하기' 클릭4) 애플리케이션 정보 입력 후 '저장' 클릭 2. 카카오 로그인 설정 & 비즈 앱 전환1) 생성한 애플리케이션 클릭2) '대시보드 > 설정 > 카카오 로그인 > 설정하기' 클릭3) 카카오 로그인 활성화4) '대시보드 > 설정 > 동의항목 > 설정하기' 클릭5) '카카오 로그인 > 동의항목 > 개인정보 동의항목 심사 신청' 클릭6) '앱 권한 신청 > 비즈 앱 전환' 클릭7) '비즈니스 > 개인 개발자 비즈 앱 전환' 클릭8) 비즈 앱 전환 목적 선택 후 전환 클릭  3. 앱 권한 신청(선택)  4. 동의 항목 설정1) '대시보드 > 설정 > 동의항목 > 설정하..

src / service / auth / signUp.tsimport { supabase } from "@/lib/supabaseClient";import { signUpType } from "@/types/auth/signUp.type";export async function signUp({ email, password }: signUpType) { const { data, error } = await supabase.auth.signUp({ email, password }); return { data, error };} src / hooks / useAuth.tsimport { useModalStore } from "@/store";import { useRouter } from "next/navi..

로그인 컴포넌트 ( src / components / signIn / SignIn.tsx )"use client";import { useState } from "react";import useAuth from "@/hooks/auth/useAuth";export default function SignIn() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const { handleSignIn } = useAuth(); // 로그인 처리 함수 const signIn = async (e: React.FormEvent) => { e.preventDefault(); handleSign..

상황Supabase를 활용해 이메일 회원가입 & 로그인 기능을 개발하는 중이었다.Supabase의 이메일 회원가입 플로우는 아래와 같다.1. supabase.auth.signUp API에 회원가입할 이메일, 비밀번호, 리다이렉트 주소를 넣어 API를 요청한다.2. Supabase 서버가 해당 이메일에 인증 링크가 포함된 회원가입 인증 메일을 발송한다.(이 때 인증링크는 기본적으로 http://localhost:3000으로 설정된다.)3. 사용자가 인증 메일 내 링크를 클릭하면 Supabase 서버에 해당 사용자의 인증 여부가 저장된다.4. supabase.auth.signInWithPassword API를 통해 이메일, 비밀번호를 입력해 로그인한다.5. Supabase 서버가 payload에 사용자 정보..