최신 Next.js 기능과 함께 Firebase 인증 사용

소개 next-firebase-auth-edge 기존 또는 새 Next.js 애플리케이션에 Firebase 인증을 추가하는 방법을 검색하는 동안 이 문서를 발견했을 것입니다. 귀하는 앱이 성공할 가능성을 극대화할 수 있는 현명하고 공정하며 미래 지향적인 결정을 내리는 것을 목표로 합니다. next-firebase-auth-edge의 창시자로서 저는 완전히 편견 없는 의견을 제공하는 것이 제 장점이 아니라는 점을 인정해야 합니다. 하지만 적어도 라이브러리를 디자인할 때 제가 취한 접근 방식을 정당화하려고 노력하겠습니다. 이 가이드가 끝날 때쯤에는 이 접근 방식이 간단하고 장기적으로 실행 가능하다는 것을 알게 되기를 바랍니다. 어떻게 시작됐나 긴 소개는 생략하겠습니다. 도서관에 대한 아이디어는 귀하와 비슷한 상황에서 영감을 받았다고 말씀드리고 싶습니다. Next.js가 의 카나리아 버전을 출시했을 때였습니다. 저는 재작성 및 내부 리디렉션에 크게 의존하는 앱을 작업하고 있었습니다. 이를 위해 우리는 사용자 정의 Node.js 서버 렌더링 Next.js 앱을 사용했습니다. App Router express 우리는 및 에 대해 정말 기대하고 있었지만 이것이 우리의 맞춤형 서버와 호환되지 않을 것이라는 점을 알고 있었습니다. 사용자 정의 Express 서버의 필요성을 없애기 위해 활용할 수 있는 강력한 기능처럼 보였고 대신 Next.js의 내장 기능에만 의존하여 사용자를 다른 페이지로 동적으로 리디렉션하고 다시 작성하는 것을 선택했습니다. App Router Server Components 미들웨어는 당시 우리는 사용하고 있었습니다. 우리는 라이브러리가 정말 마음에 들었지만 레거시로 간주될 , , , 파일을 통해 인증 로직을 확장했습니다. 곧. 또한 라이브러리가 미들웨어와 호환되지 않아 URL을 다시 작성하거나 컨텍스트에 따라 사용자를 리디렉션할 수 없었습니다. next-firebase-auth 를 next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts 그래서 검색을 시작했는데 놀랍게도 미들웨어 내에서 Firebase 인증을 지원하는 라이브러리를 찾을 수 없었습니다. – Node.js와 React에서 11년 이상의 상업적 경험을 가진 소프트웨어 엔지니어로서 저는 이 난제를 해결하기 위해 준비하고 있었습니다. 왜 그럴 수 있나요? 그것은 불가능! 그래서 시작했습니다. 그리고 대답은 분명해졌습니다. 미들웨어는 내에서 실행됩니다. 내에서 사용 가능한 와 호환되는 Firebase 라이브러리는 없습니다. . 나는 무력감을 느꼈다. 새롭고 멋진 API를 사용하기 위해 실제로 하는 것은 이번이 처음입니까? - 나는 재빨리 흐느낌을 멈추고 , 및 기타 여러 JWT 인증 라이브러리를 리버스 엔지니어링하여 Edge 런타임에 맞게 조정하기 시작했습니다. 저는 가장 가볍고, 구성하기 쉽고, 미래 지향적인 인증 라이브러리를 만드는 것을 목표로 이전 인증 라이브러리에서 겪었던 모든 문제를 해결할 기회를 잡았습니다. Edge Runtime Edge Runtime Web Crypto API 나는 운명을 정했다 기다려야 아니요. 지켜보는 냄비는 결코 끓지 않습니다. next-firebase-auth firebase-admin 약 2주 후에 버전 이 탄생했습니다. 이는 확실한 개념 증명이었지만 버전 사용하고 싶지는 않을 것입니다. 날 믿어. next-firebase-auth-edge 0.0.1 0.0.1 어떻게 지내요 거의 , 저는 , , 전 세계의 훌륭한 개발자들로부터 후 라이브러리가 제 또 다른 자아가 저에게 승인을 받는 단계에 도달했음을 발표하게 되어 기쁩니다. 2년 후 372개의 커밋 110개의 문제 해결 귀중한 피드백을 받은 이 가이드에서는 사용하여 인증된 Next.js 앱을 처음부터 생성하겠습니다. 새로운 Firebase 프로젝트 및 Next.js 앱 생성부터 시작하여 및 라이브러리와의 통합까지 각 단계를 자세히 살펴보겠습니다. 이 튜토리얼이 끝나면 Vercel에 앱을 배포하여 모든 것이 로컬 및 프로덕션 준비 환경에서 모두 작동하는지 확인합니다. 버전 1.4.1을 next-firebase-auth-edge next-firebase-auth-edge firebase/auth Firebase 설정 이 부분에서는 아직 Firebase 인증을 설정하지 않았다고 가정합니다. 그렇지 않은 경우 다음 부분으로 건너뛰셔도 됩니다. 로 이동하여 보겠습니다. Firebase 콘솔 프로젝트를 생성해 프로젝트가 생성되면 Firebase 인증을 활성화해 보겠습니다. 콘솔을 열고 따르고 방법을 활성화하십시오. 이것이 우리 앱에서 지원할 방법입니다. 빌드 > 인증 > 로그인 방법을 이메일 및 비밀번호 첫 번째 로그인 방법을 활성화한 후에는 프로젝트에 대해 Firebase 인증이 활성화되어야 하며 에서 검색할 수 있습니다. 프로젝트 설정 웹 API 키를 API 키를 복사하여 안전하게 보관하세요. 이제 다음 탭인 열고 적어 두겠습니다. 나중에 필요할 거예요. Cloud Messaging을 Sender ID를 마지막으로 서비스 계정 자격 증명을 생성해야 합니다. 이를 통해 앱은 Firebase 서비스에 대한 전체 액세스 권한을 얻을 수 있습니다. 으로 이동하여 클릭합니다. 그러면 서비스 계정 자격 증명이 포함된 파일이 다운로드됩니다. 이 파일을 알려진 위치에 저장하십시오. 프로젝트 설정 > 서비스 계정 새 개인 키 생성을 .json Next.js 앱을 Firebase 인증과 통합할 준비가 되었습니다. 그게 다야! 처음부터 Next.js 앱 만들기 이 가이드에서는 와 설치되어 있다고 가정합니다. 이 튜토리얼에 사용된 명령은 최신 LTS 에 대해 검증되었습니다. 터미널에서 실행하여 노드 버전을 확인할 수 있습니다. 과 같은 도구를 사용하여 Node.js 버전 간에 빠르게 전환할 수도 있습니다. Node.js npm이 Node.js v20 node -v NVM CLI를 사용하여 Next.js 앱 설정 즐겨찾는 터미널을 열고 프로젝트 폴더로 이동하여 실행하세요. npx create-next-app@latest 간단하게 유지하기 위해 기본 구성을 사용해 보겠습니다. 이는 와 사용한다는 의미입니다. TypeScript tailwind ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No 프로젝트의 루트 디렉토리로 이동하여 모든 종속성이 설치되어 있는지 확인하겠습니다. cd my-app npm install 모든 것이 예상대로 작동하는지 확인하기 위해 명령을 사용하여 Next.js 개발 서버를 시작해 보겠습니다. 열면 다음과 유사한 Next.js 시작 페이지가 표시됩니다. npm run dev http://localhost:3000 을 환경변수 준비 Firebase와의 통합을 시작하기 전에 Firebase 구성을 저장하고 읽을 수 있는 안전한 방법이 필요합니다. 다행히 Next.js에는 지원이 내장되어 있습니다. dotenv 즐겨 사용하는 코드 편집기를 열고 프로젝트 폴더로 이동하세요. 프로젝트의 루트 디렉터리에 파일을 만들고 다음 환경 변수로 채워보겠습니다. .env.local FIREBASE_ADMIN_CLIENT_EMAIL=... FIREBASE_ADMIN_PRIVATE_KEY=... AUTH_COOKIE_NAME=AuthToken AUTH_COOKIE_SIGNATURE_KEY_CURRENT=secret1 AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS=secret2 USE_SECURE_COOKIES=false NEXT_PUBLIC_FIREBASE_PROJECT_ID=... NEXT_PUBLIC_FIREBASE_API_KEY=AIza... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=....firebaseapp.com NEXT_PUBLIC_FIREBASE_DATABASE_URL=....firebaseio.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=... 접두사가 붙은 변수는 클라이언트측 번들에서 사용할 수 있습니다. 설정하려면 이 정보가 필요합니다. NEXT_PUBLIC_ Firebase 인증 클라이언트 SDK를 , 및 는 서비스 계정 자격 증명을 생성한 후 다운로드한 파일에서 검색할 수 있습니다. NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json 사용자 자격 증명을 저장하는 데 사용되는 쿠키의 이름입니다. AUTH_COOKIE_NAME 및 는 자격 증명에 서명할 비밀입니다. AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS 는 일반 페이지에서 검색된 입니다. NEXT_PUBLIC_FIREBASE_API_KEY 프로젝트 설정 웹 API 키 은 .firebaseapp.com입니다. NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN 프로젝트 ID 은 .firebaseio.com입니다. NEXT_PUBLIC_FIREBASE_DATABASE_URL 프로젝트 ID 는 > 페이지에서 얻을 수 있습니다. NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID 프로젝트 설정 클라우드 메시징 로컬 개발에 사용되지 않지만 Vercel에 앱을 배포할 때 유용합니다. USE_SECURE_COOKIES Firebase 인증과 통합 설치 및 초기 구성 next-firebase-auth-edge 실행하여 프로젝트의 종속성에 라이브러리를 추가합니다. npm install next-firebase-auth-edge@^1.4.1 프로젝트 구성을 캡슐화하기 위해 파일을 만들어 보겠습니다. 필수는 아니지만 코드 예제를 더 읽기 쉽게 만듭니다. config.ts 이러한 가치를 숙고하는 데 너무 많은 시간을 소비하지 마십시오. 계속 진행하면서 이에 대해 더 자세히 설명하겠습니다. export const serverConfig = { cookieName: process.env.AUTH_COOKIE_NAME!, cookieSignatureKeys: [process.env.AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!], cookieSerializeOptions: { path: "/", httpOnly: true, secure: process.env.USE_SECURE_COOKIES === "true", sameSite: "lax" as const, maxAge: 12 * 60 * 60 * 24, }, serviceAccount: { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!, clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL!, privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, "\n")!, } }; export const clientConfig = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }; 미들웨어 추가 프로젝트 루트에 파일을 생성하고 다음을 붙여넣습니다. middleware.ts import { NextRequest } from "next/server"; import { authMiddleware } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; 믿거나 말거나, 우리는 앱 서버를 Firebase 인증과 통합했습니다. 실제로 사용하기 전에 구성을 조금 설명하겠습니다. authMiddleware에 엔드포인트를 노출하도록 지시합니다. * 헤더를 사용하여 이 엔드포인트를 호출하면 서명된 포함된 HTTP(S) 전용 헤더로 응답합니다. loginPath GET /api/login Authorization: Bearer ${idToken} 사용자 지정 및 새로 고침 토큰이 Set-Cookie * 에서 제공되는 함수를 통해 검색됩니다. 이에 대해서는 나중에 자세히 설명합니다. idToken Firebase 클라이언트 SDK getIdToken 마찬가지로 미들웨어에 노출하도록 지시하지만 추가 헤더는 필요하지 않습니다. 호출되면 브라우저에서 인증 쿠키를 제거합니다. logoutPath GET /api/logout 는 웹 API 키입니다. 미들웨어는 이를 사용하여 사용자 정의 토큰을 새로 고치고 자격 증명이 만료된 후 인증 쿠키를 재설정합니다. apiKey 및 엔드포인트에 의해 설정되고 제거되는 쿠키의 이름입니다. cookieName /api/login /api/logout 사용자 자격 증명에 서명되는 비밀 키 목록입니다. 자격 증명은 항상 목록의 첫 번째 키로 서명되므로 최소한 하나의 값을 제공해야 합니다. 수행하기 위해 여러 키를 제공할 수 있습니다. cookieSignatureKeys 키 순환을 헤더를 생성할 때 에 전달되는 옵션입니다. 자세한 내용은 README를 참조하세요. cookieSerializeOptions Set-Cookie 쿠키 쿠키 Firebase 서비스를 사용하도록 라이브러리를 승인합니다. serviceAccount 매처는 Next.js 서버에 , , 및 파일이나 API 호출이 아닌 다른 경로에 대해 미들웨어를 실행하도록 지시합니다. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; 모든 . /api/* 호출 에 대해 미들웨어를 활성화하지 않는 이유가 궁금할 것입니다 그럴 수도 있지만 API 경로 처리기 자체 내에서 인증되지 않은 호출을 처리하는 것이 좋습니다. 이는 이 튜토리얼의 범위를 약간 벗어나지만 관심이 있으시면 알려주세요. 몇 가지 예를 준비하겠습니다! 보시다시피 구성은 되어 있으며 목적이 명확하게 정의되어 있습니다. 이제 및 엔드포인트 호출을 시작하겠습니다. 최소화 /api/login /api/logout 안전한 홈페이지 만들기 최대한 간단하게 만들기 위해 기본 Next.js 홈 페이지를 지우고 일부 개인화된 콘텐츠로 바꾸겠습니다. 열고 다음을 붙여넣습니다. ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ( Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!

); } 이것을 조금씩 분해해 봅시다. 기능은 에서 사용자 자격 증명을 검증하고 추출하도록 설계되었습니다. getTokens 쿠키 const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); 사용자가 인증되지 않았거나 두 가지 속성을 포함하는 객체인 경우 로 해결됩니다. null 외부 백엔드 서비스에 대한 API 요청을 승인하는 데 사용할 수 있는 idToken 인 입니다. 이는 범위를 약간 벗어나지만 라이브러리가 분산 서비스 아키텍처를 가능하게 한다는 점은 언급할 가치가 있습니다. 은 호환되며 모든 플랫폼의 모든 공식 Firebase 라이브러리와 함께 사용할 수 있습니다. string token token 이름에서 알 수 있듯이 이메일 주소, 프로필 사진, 포함하여 사용자를 식별하는 데 필요한 모든 정보가 포함된 의 디코딩된 버전으로, 역할과 권한에 따라 액세스를 추가로 제한할 수 있습니다. decodedToken 사용자 정의 클레임을 token 얻은 후 에서 기능을 사용하여 인증된 사용자만 페이지에 액세스할 수 있는지 확인합니다. tokens next/navigation notFound if (!tokens) { notFound(); } 마지막으로 몇 가지 기본적이고 개인화된 사용자 콘텐츠를 렌더링합니다. Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

실행해 봅시다. 개발 서버를 닫은 경우 실행하세요. npm run dev 액세스하려고 하면 표시되어야 합니다. http://localhost:3000/ 에 404: 이 페이지를 찾을 수 없습니다.가 성공! 우리는 엿보는 눈으로부터 우리의 비밀을 안전하게 지켰습니다! 설치 및 Firebase 클라이언트 SDK 초기화 firebase 프로젝트의 루트 디렉터리에서 실행하세요. npm install firebase 클라이언트 SDK 설치 후 프로젝트 루트 디렉터리에 파일을 생성하고 다음 내용을 붙여넣습니다. firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); 그러면 Firebase 클라이언트 SDK가 초기화되고 클라이언트 구성요소에 대한 앱 개체가 노출됩니다. 등록 페이지 만들기 아무도 볼 수 없다면 매우 안전한 홈 페이지가 무슨 의미가 있을까요? 사람들이 우리 앱에 들어갈 수 있도록 간단한 등록 페이지를 만들어 보겠습니다. 아래에 새롭고 멋진 페이지를 만들어 보겠습니다. ./app/register/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; import { useRouter } from "next/navigation"; export default function Register() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } return ( Pray tell, who be this gallant soul seeking entry to mine humble abode? Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> Confirm password setConfirmation(e.target.value)} id="confirm-password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Create an account Already have an account?{" "} Login here

); } 알아요. 텍스트가 많지만 양해해 주세요. 우리는 등록 페이지가 클라이언트 측 API를 사용할 것임을 나타냅니다. "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); 그런 다음 양식 상태를 유지하기 위해 몇 가지 변수와 설정자를 정의합니다. const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } 여기서는 양식 제출 논리를 정의합니다. 먼저 와 동일한지 확인하고, 그렇지 않으면 오류 상태를 업데이트합니다. 값이 유효하면 에서 사용하여 사용자 계정을 만듭니다. 이 단계가 실패하면(예: 이메일을 가져옴) 오류를 업데이트하여 사용자에게 알립니다. password confirmation firebase/auth createUserWithEmailAndPassword 모든 것이 순조롭게 진행되면 사용자를 페이지로 리디렉션합니다. 당신은 아마도 지금 혼란스러울 것이고, 그렇게 하는 것이 옳습니다. 페이지가 아직 존재하지 않습니다. 우리는 다음에 일어날 일을 준비하고 있습니다. /login /login 방문하면 페이지는 대략 다음과 같아야 합니다. http://localhost:3000/register 를 로그인 페이지 만들기 이제 사용자가 등록할 수 있으므로 신원을 증명하십시오. 아래에 로그인 페이지를 만듭니다. ./app/login/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } return ( Speak thy secret word! Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Enter Don&apos;t have an account?{" "} Register here

); } 보시다시피 등록 페이지와 매우 유사합니다. 중요한 부분에 집중해 보겠습니다. async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } 일어나는 곳입니다. 우리는 에서 사용하여 사용자의 검색합니다. 모든 마법이 firebase/auth signInEmailAndPassword idToken 그런 다음 미들웨어에 의해 노출된 엔드포인트를 호출합니다. 이 엔드포인트는 사용자 자격 증명으로 브라우저 쿠키를 업데이트합니다. /api/login 마지막으로, router.push("/"); 로그인 페이지는 대략 다음과 같습니다. 테스트해보자! 로 이동하여 임의의 이메일 주소와 비밀번호를 입력하여 계정을 만드세요. 페이지에서 해당 자격 증명을 사용하십시오. 클릭하면 로 리디렉션됩니다. http://localhost:3000/register http://localhost:3000/login Enter를 매우 안전한 홈페이지 우리는 마침내 우리 적이고 홈 페이지를 보게 되었습니다! 하지만 기다려! 어떻게 나가나요? 자신의 개인 매우 안전한 영원히(또는 12일) 세상으로부터 자신을 잠그지 않으려면 로그아웃 버튼을 추가해야 합니다. 시작하기 전에 Firebase 클라이언트 SDK를 사용하여 로그아웃할 수 있는 생성해야 합니다. 클라이언트 구성요소를 아래에 새 파일을 생성해 보겠습니다. ./app/HomePage.tsx "use client"; import { useRouter } from "next/navigation"; import { getAuth, signOut } from "firebase/auth"; import { app } from "../firebase"; interface HomePageProps { email?: string; } export default function HomePage({ email }: HomePageProps) { const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } return ( Super secure home page Only {email} holds the magic key to this kingdom!

Logout ); } 눈치채셨겠지만 이는 의 약간 수정된 버전입니다. 및 내에서만 작동하고 및 클라이언트 컨텍스트에서 실행되어야 하기 때문에 별도의 클라이언트 구성 요소를 만들어야 했습니다. 조금 복잡하다는 것은 알지만 실제로는 매우 강력합니다. 나중에 설명하겠습니다. ./app/page.tsx getTokens 서버 구성 요소 API 경로 핸들러 signOut useRouter 로그아웃 프로세스에 집중해 보겠습니다. const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } 먼저 Firebase 클라이언트 SDK에서 로그아웃합니다. 그런 다음 미들웨어에 의해 노출된 엔드포인트를 호출합니다. 사용자를 페이지로 리디렉션하여 마무리합니다. /api/logout /login 서버 홈 페이지를 업데이트해 보겠습니다. 로 이동하여 다음을 붙여넣습니다. ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; import HomePage from "./HomePage"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ; } 이제 서버 구성 요소는 사용자 토큰을 가져와 클라이언트 구성 요소에 전달하는 역할만 담당합니다. 이것은 실제로 매우 일반적이고 유용한 패턴입니다. Home HomePage 이것을 테스트해보자: 짜잔! 이제 우리는 우리 마음대로 애플리케이션에 로그인하고 로그아웃할 수 있습니다. 저건 완벽 해! 아니면 그럴까요? 인증되지 않은 사용자가 열어 홈 페이지에 들어가려고 하면 http://localhost:3000/을 404: 이 페이지를 찾을 수 없습니다. 또한 인증된 사용자는 로그아웃하지 않고도 및 페이지에 계속 액세스할 수 있습니다. http://localhost:3000/register http://localhost:3000/login 우리는 더 잘할 수 있습니다. 일부 리디렉션 논리를 추가해야 할 것 같습니다. 몇 가지 규칙을 정의해 보겠습니다. 인증된 사용자가 및 페이지에 액세스하려고 하면 로 리디렉션해야 합니다. /register /login / 인증되지 않은 사용자가 페이지에 액세스하려고 하면 으로 리디렉션해야 합니다. / /login 미들웨어는 Next.js 앱에서 리디렉션을 처리하는 가장 좋은 방법 중 하나입니다. 다행히 광범위한 리디렉션 시나리오를 처리할 수 있는 다양한 옵션과 도우미 기능을 지원합니다. authMiddleware 파일을 열고 업데이트된 버전을 붙여넣으세요. middleware.ts import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; const PUBLIC_PATHS = ['/register', '/login']; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; 그게 다야. 우리는 모든 리디렉션 규칙을 구현했습니다. 이것을 분석해보자. const PUBLIC_PATHS = ['/register', '/login']; handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, 유효한 사용자 자격 증명이 요청에 첨부될 때 호출됩니다. 사용자가 인증되었습니다. 개체를 첫 번째로, 두 번째 인수로 사용하여 호출됩니다. 로 해결되어야 합니다. handleValidToken tokens 수정된 요청 헤더를 NextResponse 의 로 단순화할 수 있는 객체를 반환하는 도우미 함수입니다. next-firebase-auth-edge redirectToHome NextResponse.redirect(new URL(“/“)) 확인하여 인증된 사용자가 또는 페이지에 액세스하려고 시도하는지 확인하고, 그러한 경우 홈으로 리디렉션합니다. PUBLIC_PATHS.includes(request.nextUrl.pathname) /login /register handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, 일이 발생하면 호출됩니다. 예상되는 이벤트 중 하나는 사용자가 처음으로, 다른 기기에서 또는 자격 증명이 만료된 후에 앱을 보는 것입니다. handleInvalidToken 예상된 인증되지 않은 사용자에 대해 호출된다는 사실을 알고 나면 두 번째 규칙을 진행할 수 있습니다. 인증되지 않은 사용자가 페이지 사용자를 handleInvalidToken / 에 액세스하려고 하면 해당 /login 으로 리디렉션해야 합니다. 충족해야 할 다른 조건이 없기 때문에 우리는 으로 단순화할 수 있는 결과를 반환합니다. 또한 사용자가 리디렉션 루프에 빠지지 않도록 합니다. NextResponse.redirect(new URL(“/login”)) redirectToLogin 마지막으로, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } 과 달리, 일이 발생하여 조사가 필요할 때 호출됩니다. 에서 해당 설명과 함께 가능한 오류 목록을 찾을 수 있습니다. handleInvalidToken 예상치 못한* handleError 문서 오류가 발생하면 이 사실을 기록하고 사용자를 로그인 페이지로 안전하게 리디렉션합니다. * Google 공개 키가 업데이트된 후 오류와 함께 호출될 수 있습니다. INVALID_ARGUMENT handleError 이는 키 순환의 한 형태이며 됩니다. 예상 자세한 내용은 이 Github 문제를 참조하세요. 이제 그게 다입니다. 마지막으로. 웹 앱에서 로그아웃하고 엽니다. 페이지로 리디렉션되어야 합니다. http://localhost:3000/ 을 /login 다시 로그인하고 입력해 보겠습니다. 페이지로 리디렉션되어야 합니다. http://localhost:3000/login 을 / 우리는 원활한 사용자 경험을 제공했을 뿐만 아니라 앱 서버에서만 작동하고 추가 클라이언트 측 코드를 도입하지 않는 라이브러리입니다. 결과 번들은 정말 입니다. 그것이 내가 완벽하다고 부르는 것입니다. next-firebase-auth-edge 번들 크기가 없는 최소한 이제 우리 앱은 서버 및 클라이언트 구성 요소 모두에서 Firebase 인증과 완전히 통합되었습니다. 우리는 Next.js의 잠재력을 최대한 발휘할 준비가 되었습니다! 앱의 소스 코드는 에서 찾을 수 있습니다. next-firebase-auth-edge/examples/next-typescript-minimal 발문 이 가이드에서는 새로운 Next.js 앱을 Firebase 인증과 통합하는 방법을 살펴보았습니다. 상당히 광범위하기는 하지만 이 기사에서는 비밀번호 재설정 양식이나 이메일 및 비밀번호 이외의 로그인 방법과 같은 인증 흐름의 일부 중요한 부분을 생략했습니다. 라이브러리에 관심이 있다면 본격적인 미리 볼 수 있습니다. next-firebase-auth-edge 시작 데모 페이지를 , , 등을 제공합니다. Firestore 통합 서버 작업 앱 체크 지원 라이브러리는 수많은 예제가 포함된 제공합니다. 전용 문서 페이지를 기사가 마음에 드셨다면 저장소를 추천해 주시면 감사하겠습니다. 건배! 🎉 next-firebase-auth-edge 보너스 – Vercel에 앱 배포 이 보너스 가이드는 Next.js 앱을 Vercel에 배포하는 방법을 알려줍니다. Git 저장소 생성 Vercel에 배포하려면 새 앱을 위한 저장소를 생성해야 합니다. 으로 이동하여 새 저장소를 만듭니다. https://github.com/ 이미 로컬 git 저장소를 시작했으므로 프로젝트의 루트 폴더로 이동하여 다음을 실행하면 됩니다. create-next-app git add --all git commit -m "first commit" git branch -M main git remote add origin git@github.com:path-to-your-new-github-repository.git git push -u origin main 새로운 Vercel 프로젝트 추가 으로 이동하여 Github 계정으로 로그인하세요. https://vercel.com/ 로그인한 후 Vercel의 개요 페이지로 이동하여 클릭하세요. 새로 추가 > 프로젝트를 방금 생성한 Github 저장소 옆에 있는 클릭합니다. 아직 배포하지 마세요. 가져오기를 배포하기 전에 프로젝트 구성을 제공해야 합니다. 몇 가지 환경 변수를 추가해 보겠습니다. Vercel은 기본적으로 HTTPS를 사용하므로 로 설정해야 합니다. USE_SECURE_COOKIES true 이제 클릭할 준비가 되었습니다. 배포를 1~2분 정도 기다리면 다음과 유사한 URL을 사용하여 앱에 액세스할 수 있습니다: https://next-typescript-minimal-xi.vercel.app/ 완료. 나는 당신이 그것이 그렇게 쉬울 것이라고 기대하지 않았을 것이라고 확신합니다. 가이드가 마음에 드셨다면 저장소를 추천해 주시면 감사하겠습니다. next-firebase-auth-edge 댓글로 피드백을 알려주실 수도 있습니다. 건배! 🎉