Remix Simple Authentication

_index.tsx

import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
import { Form, useLoaderData } from '@remix-run/react'
import { sessionCookie } from '../session.server'

export async function loader({ request }: LoaderFunctionArgs) {
  const cookieHeader = request.headers.get('Cookie')
  const cookie = await sessionCookie.parse(cookieHeader)
  if (!cookie) {
    return redirect('/login')
  }

  return { userId: cookie.userId }
}

export default function Index() {
  const { userId } = useLoaderData<typeof loader>()

  return (
    <Form action="/logout" method="post">
      <h1>Welcome to Remix! User {userId}</h1>
      <button type="submit">Sair</button>
    </Form>
  )
}

login.tsx

import {
  ActionFunctionArgs,
  LoaderFunctionArgs,
  redirect,
} from '@remix-run/node'
import { Form } from '@remix-run/react'
import { sessionCookie } from '~/session.server'

async function getUser({
  email,
  password,
}: {
  email: string
  password: string
}) {
  if (email === 'user@email.com' && password === '123123') {
    return { id: 123 }
  }

  return null
}

async function createUserSession({ userId }: { userId: number }) {
  return { id: 123, userId }
}

export async function loader({ request }: LoaderFunctionArgs) {
  const cookieHeader = request.headers.get('Cookie')
  const cookie = await sessionCookie.parse(cookieHeader)
  // user is logged in
  if (cookie) {
    return redirect('/')
  }

  return null
}

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData()
  const email = String(formData.get('email'))
  const password = String(formData.get('password'))

  const user = await getUser({ email, password })
  if (!user) {
    return new Response('Unable to authenticate', { status: 400 })
  }

  const session = await createUserSession({ userId: user.id })
  return redirect('/', {
    headers: {
      'Set-Cookie': await sessionCookie.serialize(session),
    },
  })
}

export default function Login() {
  return (
    <Form
      method="post"
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 8,
        maxWidth: 300,
      }}
    >
      <input name="email" type="email" defaultValue="user@email.com" />
      <input name="password" type="password" defaultValue="123123" />
      <button type="submit">Entrar</button>
    </Form>
  )
}

logout.tsx

import { ActionFunctionArgs, redirect } from '@remix-run/node'
import { sessionCookie } from '~/session.server'

async function destroySession({ userId }: { userId: number }) {
  // session exists? user exists?
  return { id: 123123 }
}

export async function action({ request }: ActionFunctionArgs) {
  const cookieHeader = request.headers.get('Cookie')
  const cookie = await sessionCookie.parse(cookieHeader)
  if (!cookie) {
    return redirect('/login')
  }

  const destroyedSession = await destroySession({ userId: cookie.userId })
  if (!destroyedSession) {
    return new Response('Unable to logout', { status: 400 })
  }

  return redirect('/login', {
    headers: {
      'Set-Cookie': await sessionCookie.serialize(''),
    },
  })
}

session.server.ts

import { createCookie } from '@remix-run/node'

export const sessionCookie = createCookie('_session', {
  httpOnly: true,
  secrets: ['verysecretsecret'],
  secure: true,
  maxAge: 604800, // one week
})