인증 2

[Next13] 인증 상태에 따른 페이지 리다이렉트 / 로그인, cookie, middleware

[Next13_middleware] 인증 여부에 따른 페이지 리다이렉트를 구현하고싶다@! 로그인이 되어있지 않은 유저가 접속할 때 로그인 페이지로 이동하는 과정에서 새로고침을 하는 경우에 메인 페이지가 보였다가 로그인 페이지로 이동하는 깜빡임 현상이 발생했다. 이 문제를 해결하기 위해 많은 고민을 했는데, 결론부터 이야기 하자면 cookie + Next.js의 middleware를 사용하여 해결하였다. 그래서 그동안 시도했던 방법들을 소개하려고 한다. 👉 cookie + middleware 바로 보기👈 1️⃣ localStorage 로그인 했을 때 localStorage에 로그인 정보를 저장하여 로그인 여부를 판별하는 방법이다. import {useRoute} from 'next/navigation'; ..

STUDY/Next js 2023.10.29

[Firebase] 인증 구현하기 / 이메일 비밀번호, 구글 로그인

[Firebabse_ 인증] Firebase를 통해 서버리스 애플리케이션으로 쇼핑몰 프로젝트를 진행하고 있다. 사실 쇼핑몰은 예전부터 하고싶은 프로젝트였는데 잠시 미뤄두고 있었다. 그런데 친구가 쇼핑몰을 오픈하려고 한다는 소식을 듣고 괜히 만들어주고 싶어서(?) 드디어 시작하게 되었다. (ㅎㅎ firebase의 인증 시스템을 이용하여 자체 회원가입 및 로그인, 구글 소셜 로그인 기능을 구현하였는데 복습도 할 겸 정리해 보려고 한다. 1️⃣ 파이어베이스 연동하기 파이어베이스에 프로젝트를 생성하고 [프로젝트 설정 - Web App] 부분을 보면 아래 사진처럼 sdk 설정 및 구성 방법이 나온다. 저 부분을 복사해서 src/api/firebase.js 폴더에 붙여넣기 하면 된다. 참고로 firebaseConf..

RECORD 2023.06.12