Usando o Firebase Authentication com os recursos Next.js mais recentes

Introdução ao next-firebase-auth-edge Você provavelmente encontrou este artigo enquanto procurava maneiras de adicionar o Firebase Authentication ao seu aplicativo Next.js existente ou novo. Seu objetivo é tomar uma decisão inteligente, imparcial e voltada para o futuro que maximizará as chances de sucesso do seu aplicativo. Como criador do next-firebase-auth-edge, devo admitir que fornecer uma opinião totalmente imparcial não é meu forte, mas pelo menos tentarei justificar a abordagem que adotei ao projetar a biblioteca. Esperançosamente, ao final deste guia, você poderá achar a abordagem simples e viável a longo prazo. Como isso começou Vou poupar-lhe longas apresentações. Deixe-me apenas dizer que a ideia da biblioteca foi inspirada em uma situação possivelmente semelhante à sua. Foi a época em que Next.js lançou uma versão canário do . Eu estava trabalhando em um aplicativo que dependia muito de reescritas e redirecionamentos internos. Para isso, estávamos usando o aplicativo Next.js de renderização de servidor Node.js personalizado. App Router express Ficamos muito entusiasmados com e , mas cientes de que não seria compatível com nosso servidor personalizado. parecia um recurso poderoso que poderíamos aproveitar para eliminar a necessidade de um servidor Express personalizado, optando por confiar apenas nos recursos integrados do Next.js para redirecionar e reescrever usuários para páginas diferentes dinamicamente. o App Router o Server Components O middleware Naquela época, estávamos usando . Gostamos muito da biblioteca, mas ela espalhou nossa lógica de autenticação por meio de arquivos , , , , que seriam considerados legados em breve. Além disso, a biblioteca não era compatível com o middleware, impedindo-nos de reescrever URLs ou redirecionar usuários com base em seu contexto. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts Então, comecei minha pesquisa, mas para minha surpresa, não encontrei nenhuma biblioteca que suportasse o Firebase Authentication no middleware. – Como engenheiro de software com mais de 11 anos de experiência comercial em Node.js e React, eu estava me preparando para enfrentar esse enigma. Por que isso poderia ser? É impossível! Então, eu comecei. E a resposta tornou-se óbvia. O middleware está sendo executado dentro . Não há biblioteca Firebase compatível com disponíveis no . . Eu me senti impotente. É a primeira vez que terei que para começar a brincar com as novas e sofisticadas APIs? - Rapidamente parei de chorar e comecei a fazer engenharia reversa , e várias outras bibliotecas de autenticação JWT, adaptando-as ao Edge Runtime. Aproveitei a oportunidade para resolver todos os problemas que encontrei com bibliotecas de autenticação anteriores, com o objetivo de criar a biblioteca de autenticação mais leve, mais fácil de configurar e voltada para o futuro. do Edge Runtime APIs Web Crypto Edge Runtime Eu estava condenado esperar Não. Uma panela vigiada nunca ferve. next-firebase-auth firebase-admin Cerca de duas semanas depois, nasceu a versão do . Foi uma prova de conceito sólida, mas você não gostaria de usar a versão . Confie em mim. 0.0.1 next-firebase-auth-edge 0.0.1 Como está indo Quase , estou emocionado em anunciar que, após , e um de desenvolvedores incríveis em todo o mundo, a biblioteca atingiu um estágio em que meus outros eus me aprovam. dois anos depois 372 commits 110 problemas resolvidos monte de feedback inestimável Neste guia, usarei a versão para criar um aplicativo Next.js autenticado do zero. Passaremos por cada etapa detalhadamente, começando com a criação de um novo projeto Firebase e aplicativo Next.js, seguido pela integração com as bibliotecas e . Ao final deste tutorial, iremos implantar o aplicativo no Vercel para confirmar se tudo está funcionando tanto localmente quanto em ambiente pronto para produção. 1.4.1 do next-firebase-auth-edge next-firebase-auth-edge firebase/auth Configurando o Firebase Esta parte pressupõe que você ainda não configurou o Firebase Authentication. Sinta-se à vontade para pular para a próxima parte, caso contrário. Vamos para e o Firebase Console criar um projeto Após a criação do projeto, vamos ativar o Firebase Authentication. Abra o console e siga para e habilite o método . Esse é o método que vamos apoiar em nosso aplicativo Construir > Autenticação > Método de login de e-mail e senha Depois de ativar seu primeiro método de login, o Firebase Authentication deverá ser ativado para seu projeto e você poderá recuperar sua nas chave de API da Web configurações do projeto Copie a chave API e mantenha-a segura. Agora, vamos abrir a próxima guia – e anotar . Vamos precisar disso mais tarde. Cloud Messaging o Sender ID Por último, mas não menos importante, precisamos gerar credenciais de conta de serviço. Isso permitirá que seu aplicativo obtenha acesso total aos serviços do Firebase. Vá para e clique em . Isso fará o download de um arquivo com credenciais da conta de serviço. Salve este arquivo em um local conhecido. Configurações do projeto > Contas de serviço Gerar nova chave privada .json Estamos prontos para integrar o aplicativo Next.js ao Firebase Authentication É isso! Criando aplicativo Next.js do zero Este guia pressupõe que você tenha e instalados. Os comandos usados neste tutorial foram verificados em relação ao LTS mais recente. Você pode verificar a versão do nó executando no terminal. Você também pode usar ferramentas como para alternar rapidamente entre as versões do Node.js. o Node.js o npm Node.js v20 node -v NVM Configurando o aplicativo Next.js com CLI Abra seu terminal favorito, navegue até a pasta de projetos e execute npx create-next-app@latest Para simplificar, vamos usar a configuração padrão. Isso significa que usaremos e 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 Vamos navegar até o diretório raiz do projeto e verificar se todas as dependências estão instaladas cd my-app npm install Para confirmar que tudo funciona conforme o esperado, vamos iniciar o servidor de desenvolvimento Next.js com o comando . Ao abrir , você deverá ver a página de boas-vindas do Next.js, semelhante a esta: npm run dev http://localhost:3000 Preparando variáveis de ambiente Antes de começarmos a integração com o Firebase, precisamos de uma maneira segura de armazenar e ler nossa configuração do Firebase. Felizmente, Next.js vem com suporte integrado . a dotenv Abra seu editor de código favorito e navegue até a pasta do projeto Vamos criar o arquivo no diretório raiz do projeto e preenchê-lo com as seguintes variáveis de ambiente: .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=... Observe que as variáveis prefixadas com estarão disponíveis no pacote do lado do cliente. Precisaremos deles para configurar NEXT_PUBLIC_ o Firebase Auth Client SDK , e podem ser recuperados do arquivo baixado após gerar credenciais de conta de serviço NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json será o nome do cookie usado para armazenar credenciais do usuário AUTH_COOKIE_NAME e são segredos com os quais assinaremos as credenciais AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS é recuperada da página geral NEXT_PUBLIC_FIREBASE_API_KEY a chave da API da Web de configurações do projeto é .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN o ID do seu projeto é .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL o ID do seu projeto pode ser obtido em > página NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Configurações do projeto Mensagens na nuvem não será usado para desenvolvimento local, mas será útil quando implantarmos nosso aplicativo no Vercel USE_SECURE_COOKIES Integração com autenticação do Firebase Instalando e configuração inicial next-firebase-auth-edge Adicione a biblioteca às dependências do projeto executando npm install next-firebase-auth-edge@^1.4.1 Vamos criar o arquivo para encapsular a configuração do nosso projeto. Não é obrigatório, mas tornará os exemplos de código mais legíveis. config.ts Não perca muito tempo ponderando sobre esses valores. Iremos explicá-los com mais detalhes à medida que prosseguirmos. 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 }; Adicionando Middleware Crie o arquivo na raiz do projeto e cole o seguinte 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", ], }; Acredite ou não, acabamos de integrar o servidor do nosso aplicativo ao Firebase Authentication. Antes de realmente usá-lo, vamos explicar um pouco a configuração: instruirá o authMiddleware a expor o endpoint . Quando este endpoint é chamado com o cabeçalho *, ele responde com o cabeçalho HTTP(S)-Only contendo assinados loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie tokens personalizados e de atualização * é recuperado com a função disponível no . Mais sobre isso mais tarde. idToken getIdToken Firebase Client SDK Da mesma forma, instrui o middleware a expor , mas não requer nenhum cabeçalho adicional. Quando chamado, remove cookies de autenticação do navegador. logoutPath GET /api/logout é a chave da API da Web. O middleware o utiliza para atualizar o token personalizado e redefinir os cookies de autenticação após as credenciais expirarem. apiKey é o nome do cookie definido e removido pelos endpoints e cookieName /api/login /api/logout uma lista de chaves secretas com as quais as credenciais do usuário são assinadas. As credenciais sempre serão assinadas com a primeira chave da lista, portanto você precisa fornecer pelo menos um valor. Você pode fornecer várias chaves para realizar uma cookieSignatureKeys rotação de chaves são opções passadas para ao gerar o cabeçalho . Consulte o README para obter mais informações cookieSerializeOptions cookie Set-Cookie do cookie autoriza a biblioteca a usar seus serviços do Firebase. serviceAccount O matcher instrui o servidor Next.js a executar o Middleware em , , e qualquer outro caminho que não seja um arquivo ou chamada de API. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; as chamadas Você deve estar se perguntando por que não habilitamos o middleware para todas /api/* . Poderíamos, mas é uma boa prática lidar com chamadas não autenticadas dentro do próprio manipulador de rotas da API. Isso está um pouco fora do escopo deste tutorial, mas se você estiver interessado, me avise e prepararei alguns exemplos! Como você pode ver, a configuração é e com finalidade claramente definida. Agora, vamos começar a chamar nossos endpoints e . mínima /api/login /api/logout Criando uma página inicial segura Para tornar as coisas o mais simples possível, vamos limpar a página inicial padrão do Next.js e substituí-la por algum conteúdo personalizado Abra e cole isto: ./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!

); } Vamos analisar isso pouco a pouco. A função foi projetada para validar e extrair credenciais de usuário de getTokens cookies const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Ele resolve com , se o usuário não estiver autenticado ou com um objeto contendo duas propriedades: null que é idToken que você pode usar para autorizar solicitações de API para serviços de back-end externos. Isso está um pouco fora do escopo, mas vale a pena mencionar que a biblioteca permite arquitetura de serviços distribuídos. O é compatível e pronto para uso com todas as bibliotecas oficiais do Firebase em todas as plataformas. token string token como o nome sugere, é uma versão decodificada do , que contém todas as informações necessárias para identificar o usuário, incluindo endereço de e-mail, foto do perfil e , o que nos permite restringir ainda mais o acesso com base em funções e permissões. decodedToken token declarações personalizadas Depois de obter , usamos a função de para garantir que a página esteja acessível apenas para usuários autenticados tokens notFound next/navigation if (!tokens) { notFound(); } Por fim, renderizamos algum conteúdo básico e personalizado do usuário Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Vamos executá-lo. Caso você tenha fechado seu servidor de desenvolvimento, basta executar . npm run dev Ao tentar acessar , você deverá ver http://localhost:3000/ 404: Esta página não foi encontrada. Sucesso! Mantivemos nossos segredos protegidos de olhares indiscretos! Instalando e inicializando o Firebase Client SDK firebase Execute no diretório raiz do projeto npm install firebase Após a instalação do SDK do cliente, crie o arquivo no diretório raiz do projeto e cole o seguinte firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Isso inicializará o Firebase Client SDK e exporá o objeto do aplicativo para componentes do cliente Criando uma página de registro Qual é o sentido de ter uma página inicial supersegura se ninguém consegue visualizá-la? Vamos construir uma página de registro simples para permitir que as pessoas acessem nosso aplicativo. Vamos criar uma página nova e sofisticada em ./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

); } Eu sei. É muito texto, mas tenha paciência comigo. Começamos com para indicar que a página de registro usará APIs do lado do cliente "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Então, definimos algumas variáveis e setters para manter o estado do nosso formulário 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); } } Aqui, definimos nossa lógica de envio de formulário. Primeiro validamos se e são iguais, caso contrário atualizamos o estado de erro. Se os valores forem válidos, criamos uma conta de usuário com de . Se esta etapa falhar (por exemplo, o e-mail for recebido), informaremos o usuário atualizando o erro. password confirmation createUserWithEmailAndPassword firebase/auth Se tudo correr bem, redirecionamos o usuário para a página . Você provavelmente está confuso agora e está certo em estar assim. A página ainda não existe. Estamos apenas nos preparando para o que virá a seguir. /login /login Quando você visita , a página deve ficar mais ou menos assim: http://localhost:3000/register Criando uma página de login Agora que os usuários podem se cadastrar, deixe-os comprovar sua identidade Crie uma página de login em ./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

); } Como você pode ver, é muito semelhante à página de registro. Vamos nos concentrar na parte crucial: 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); } } É onde acontece. Usamos do para recuperar do usuário. toda a magia signInEmailAndPassword firebase/auth idToken Em seguida, chamamos o endpoint exposto pelo middleware. Este endpoint atualiza os cookies do nosso navegador com credenciais do usuário. /api/login Finalmente, redirecionamos o usuário para a página inicial chamando router.push("/"); A página de login deve ser mais ou menos assim Vamos testar! Vá para , digite algum endereço de e-mail aleatório e senha para criar uma conta. Use essas credenciais na página . Depois de clicar , você será redirecionado para http://localhost:3000/register http://localhost:3000/login em Enter a página inicial super segura Finalmente conseguimos ver nossa página inicial ! Mas espere! Como saímos? pessoal e ultra segura Precisamos adicionar um botão de logout para não nos isolarmos do mundo para sempre (ou 12 dias). Antes de começarmos, precisamos criar um que será capaz de nos desconectar usando o Firebase Client SDK. componente cliente Vamos criar um novo arquivo em ./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 ); } Como você deve ter notado, esta é uma versão ligeiramente modificada do nosso . Tivemos que criar um componente cliente separado, porque funciona apenas dentro de e , enquanto e precisam ser executados no contexto do cliente. Um pouco complicado, eu sei, mas na verdade é bastante poderoso. Eu vou explicar mais tarde. ./app/page.tsx getTokens componentes de servidor manipuladores de rotas de API signOut useRouter Vamos nos concentrar no processo de logout const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Primeiro, saímos do Firebase Client SDK. Em seguida, chamamos o endpoint exposto pelo middleware. Terminamos redirecionando o usuário para a página . /api/logout /login Vamos atualizar a página inicial do nosso servidor. Vá para e cole o seguinte ./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 ; } Agora, nosso componente de servidor é responsável apenas por buscar tokens de usuário e passá-los para o componente cliente . Na verdade, esse é um padrão bastante comum e útil. Home HomePage Vamos testar isso: Voilá! Agora podemos fazer login e logout do aplicativo conforme nossa vontade. Perfeito! Ou é? Quando um usuário não autenticado tenta entrar na página inicial abrindo mostramos http://localhost:3000/ 404: Esta página não foi encontrada. Além disso, os usuários autenticados ainda podem acessar as páginas e sem precisar fazer logout. http://localhost:3000/register http://localhost:3000/login Podemos fazer melhor. Parece que precisamos adicionar alguma lógica de redirecionamento. Vamos definir algumas regras: Quando um usuário autenticado tenta acessar as páginas e , devemos redirecioná-lo para /register /login / Quando um usuário não autenticado tenta acessar página, devemos redirecioná-lo para / /login Middleware é uma das melhores maneiras de lidar com redirecionamentos em aplicativos Next.js. Felizmente, oferece suporte a várias opções e funções auxiliares para lidar com uma ampla variedade de cenários de redirecionamento. authMiddleware Vamos abrir o arquivo e colar esta versão atualizada 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", ], }; Deveria ser isso. Implementamos todas as regras de redirecionamento. Vamos analisar isso. 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 } }); }, é chamado quando credenciais de usuário válidas são anexadas à solicitação, ou seja. usuário está autenticado. Ele é chamado com o objeto como o primeiro e como o segundo argumento. Deve resolver com . handleValidToken tokens os cabeçalhos de solicitação modificados NextResponse de é uma função auxiliar que retorna um objeto que pode ser simplificado para redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) Ao verificar , validamos se o usuário autenticado tenta acessar a página ou e redirecionamos para home se for o caso. 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 }); }, é chamado quando algo acontece. Um desses eventos esperados é o usuário ver seu aplicativo pela primeira vez, em outro dispositivo ou após as credenciais expirarem. handleInvalidToken esperado Sabendo que é chamado para usuário não autenticado, podemos prosseguir com a segunda regra: handleInvalidToken Quando um usuário não autenticado tenta acessar / página, devemos redirecioná-lo para /login Como não há outra condição a atender, apenas retornamos o resultado de que pode ser simplificado para . Também garante que o usuário não caia no loop de redirecionamento. redirectToLogin NextResponse.redirect(new URL(“/login”)) Por último, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } Ao contrário de , é chamado quando algo acontece e possivelmente precisa ser investigado. Você pode encontrar uma lista de possíveis erros com sua descrição na handleInvalidToken handleError inesperado* documentação Em caso de erro, registramos esse fato e redirecionamos o usuário com segurança para a página de login * pode ser chamado com o erro após a atualização das chaves públicas do Google. handleError INVALID_ARGUMENT Esta é uma forma de rotação de chaves e é . esperada Veja esta edição do Github para mais informações Agora é isso. Finalmente. Vamos sair do nosso aplicativo da web e abrir . Devemos ser redirecionados para a página . http://localhost:3000/ /login Vamos fazer login novamente e tentar inserir . Devemos ser redirecionados para página. http://localhost:3000/login / Não apenas fornecemos uma experiência de usuário perfeita. é uma biblioteca que funciona apenas no servidor do aplicativo e não introduz código adicional do lado do cliente. O pacote resultante é verdadeiramente . Isso é o que eu chamo de perfeito. next-firebase-auth-edge de tamanho zero mínimo Nosso aplicativo agora está totalmente integrado ao Firebase Authentication nos componentes Servidor e Cliente. Estamos prontos para liberar todo o potencial do Next.js! O código-fonte do aplicativo pode ser encontrado em next-firebase-auth-edge/examples/next-typescript-minimal Epílogo Neste guia, abordamos a integração do novo aplicativo Next.js com Firebase Authentication. Embora bastante extenso, o artigo omitiu algumas partes importantes do fluxo de autenticação, como formulário de redefinição de senha ou métodos de login diferentes de e-mail e senha. Se estiver interessado na biblioteca, você pode visualizar . a página de demonstração completa do next-firebase-auth-edge starter Possui , , e muito mais integração com Firestore ações de servidor suporte para App-Check A biblioteca fornece uma com vários exemplos página de documentação dedicada Se você gostou do artigo, eu apreciaria estrelar o repositório . Saúde! 🎉 next-firebase-auth-edge Bônus – Implantando aplicativo no Vercel Este guia bônus ensinará como implantar seu aplicativo Next.js no Vercel Criando repositório git Para poder implantar no Vercel, você precisará criar um repositório para seu novo aplicativo. Acesse e crie um novo repositório. https://github.com/ já iniciou um repositório git local para nós, então você só precisa seguir até a pasta raiz do seu projeto e executar: 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 Adicionando novo projeto Vercel Acesse e faça login com sua conta Github https://vercel.com/ Depois de fazer login, vá para a página Visão geral do Vercel e clique em Adicionar novo> Projeto Clique ao lado do repositório Github que acabamos de criar. Não implante ainda. em Importar Antes de implantarmos, precisamos fornecer a configuração do projeto. Vamos adicionar algumas variáveis de ambiente: Lembre-se de definir como , pois o Vercel usa HTTPS por padrão USE_SECURE_COOKIES true Agora, estamos prontos para clicar em Implantar Espere um ou dois minutos e você poderá acessar seu aplicativo com um URL semelhante a este: https://next-typescript-minimal-xi.vercel.app/ Feito. Aposto que você não esperava que fosse tão fácil. Se você gostou do guia, eu apreciaria estrelar o repositório . next-firebase-auth-edge Você também pode me deixar saber seu feedback nos comentários. Saúde! 🎉