0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Aula

Estratégias de autenticação personalizadas

Desenvolva e integre estratégias de autenticação personalizadas para requisitos específicos do projeto, além das bibliotecas existentes.

Estratégias de autenticação personalizadas é uma aula grátis de Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit. Esta é a aula 5 de 6. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack (App Router + Server Actions), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 6 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Why Custom Authentication?

While libraries like NextAuth.js are powerful, sometimes your project needs a unique authentication flow. Custom strategies give you full control over every detail.

  • Handle specific integration requirements.
  • Implement unique authentication flows (e.g., magic links).
  • Gain a deeper understanding of core auth concepts.

This lesson explores building authentication from the ground up using Next.js 15 features.

Core Concepts: Sessions & Cookies

Authentication often relies on sessions to maintain a user's logged-in state across multiple requests. To manage sessions in web applications, we primarily use HTTP cookies.

  • Cookies are small data pieces sent by a server to a browser.
  • The browser stores them and sends them back with subsequent requests.
  • They are crucial for remembering user login status.

Building a Login Form (UI)

Our custom authentication starts with a simple login form. This form captures user credentials (like username and password) and submits them to a Next.js Server Action. Each input needs a name attribute to be accessible in the action.

export default function LoginPage() {
  return (
    <form>
      <h2>Login</h2>
      <label htmlFor="username">Username:</label>
      <input id="username" name="username" type="text" required />

      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />

      <button type="submit">Log In</button>
    </form>
  );
}

Server Action for Login

When the login form is submitted, a Next.js Server Action intercepts the request. This action runs entirely on the server and is responsible for:

  • Validating the submitted username and password.
  • If valid, creating a session (e.g., generating a unique session ID).
  • Setting a secure HTTP-only cookie in the user's browser.
  • Redirecting the user to a protected page.

Code: Login Server Action

This runnable example simulates a Server Action for login. We mock Next.js's cookies() and redirect() to demonstrate how credentials are checked and a session cookie is set.

'use server';

// Mock Next.js APIs for runnable example
const mockCookies = {
  _store: {},
  set: (n, v, o) => {
    mockCookies._store[n] = { v, o };
    console.log(`[MOCK] Cookie: ${n}=${v}`);
  },
  get: (n) => mockCookies._store[n] ? { value: mockCookies._store[n].v } : undefined,
  delete: (n) => {
    delete mockCookies._store[n];
    console.log(`[MOCK] Deleted: ${n}`);
  }
};
const mockRedirect = (path) => {
  console.log(`[MOCK] Redirect to: ${path}`);
  throw new Error(`MOCK_REDIRECT:${path}`);
};

// Actual Server Action logic
export async function login(formData) {
  const username = formData.get('username');
  const password = formData.get('password');
  const users = {'testuser': 'password123'}; // Mock DB

  if (users[username] === password) {
    mockCookies.set('session', 'some_token', { httpOnly: true, maxAge: 3600 });
    mockRedirect('/dashboard');
  } else {
    console.error('Login failed: Invalid credentials');
  }
}

// Main entry point for runnable example
async function main() {
  console.log("--- Test Login Success ---");
  const successForm = new Map([
    ['username', 'testuser'],
    ['password', 'password123']
  ]);
  try { await login(successForm); }
  catch (e) { console.log(e.message); }

  console.log("\n--- Test Login Fail ---");
  const failForm = new Map([
    ['username', 'wrong'],
    ['password', 'pass']
  ]);
  try { await login(failForm); }
  catch (e) { console.log(e.message); }
  console.log("Final cookies:", mockCookies._store);
}
main();

Protecting Routes with Middleware

After a user logs in, we need to ensure they can't access restricted pages without a valid session. Next.js middleware is perfect for this, running before a request is completed.

  • Middleware intercepts requests to certain paths.
  • It checks for the presence and validity of the session cookie.
  • If no valid session, it redirects the user to the login page.

Code: Authentication Middleware

This middleware.js file demonstrates how to protect the /dashboard route by checking for our custom 'session' cookie. Middleware is a Next.js-specific feature and not runnable in a generic JavaScript environment.

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const sessionCookie = request.cookies.get('session');
  const pathname = request.nextUrl.pathname;

  // Define protected routes
  const protectedRoutes = ['/dashboard'];

  if (protectedRoutes.includes(pathname) && !sessionCookie) {
    // Redirect to login if no session
    const loginUrl = new URL('/login', request.url);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next(); // Allow request to proceed
}

// Configure matcher to run middleware on specific paths
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|login).*)'],
};

Logout Mechanism

Providing a way for users to log out securely is crucial. A logout Server Action simply needs to delete the session cookie from the user's browser, effectively ending their session.

Code: Logout Server Action

This runnable example shows a Server Action that deletes the 'session' cookie and redirects the user to the login page, simulating a logout.

'use server';

// Mock Next.js APIs for runnable example
const mockCookies = {
  _store: { 'session': { v: 'active_token' } }, // Simulate active session
  set: (n, v, o) => {
    mockCookies._store[n] = { v, o };
    console.log(`[MOCK] Cookie: ${n}=${v}`);
  },
  get: (n) => mockCookies._store[n] ? { value: mockCookies._store[n].v } : undefined,
  delete: (n) => {
    delete mockCookies._store[n];
    console.log(`[MOCK] Deleted: ${n}`);
  }
};
const mockRedirect = (path) => {
  console.log(`[MOCK] Redirect to: ${path}`);
  throw new Error(`MOCK_REDIRECT:${path}`);
};

// Actual Server Action logic
export async function logout() {
  mockCookies.delete('session');
  mockRedirect('/login');
}

// Main entry point for runnable example
async function main() {
  console.log("--- Before Logout ---");
  console.log("Initial cookies:", mockCookies._store);

  console.log("\n--- Attempting Logout ---");
  try { await logout(); }
  catch (e) { console.log(e.message); }
  console.log("Final cookies:", mockCookies._store);
}
main();

Check Your Understanding

Let's test what you've learned about custom authentication in Next.js.

Recap: Custom Auth Strategies

You've learned how to build a custom authentication strategy in Next.js 15, leveraging powerful server-side features for full control.

  • Understood session management with secure HTTP-only cookies.
  • Implemented login and logout functionality using Next.js Server Actions.
  • Secured application routes using Next.js middleware.

Remember to always prioritize security (encryption, HTTPS, secure cookies) when building custom authentication.

Perguntas Frequentes

A aula “Estratégias de autenticação personalizadas” é grátis?

Sim — o texto completo de “Estratégias de autenticação personalizadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack (App Router + Server Actions), atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 6 aulas no total.

O que vou aprender em “Estratégias de autenticação personalizadas”?

Desenvolva e integre estratégias de autenticação personalizadas para requisitos específicos do projeto, além das bibliotecas existentes. Você pratica Next.js 15 Fullstack (App Router + Server Actions) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Next.js 15 Fullstack (App Router + Server Actions)?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 5 de 6.

Quanto tempo leva a aula “Estratégias de autenticação personalizadas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Next.js 15 Fullstack (App Router + Server Actions)?

Sim. Cada aula de Next.js 15 Fullstack (App Router + Server Actions) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Integrando o NextAuth.js
  2. Implementação de Estratégias JWT
  3. Protegendo rotas e dados
  4. Guardas e Funções
  5. Estratégias de autenticação personalizadas
  6. Integração com Passport.js
← Voltar para Next.js 15 Fullstack (App Router + Server Actions)