Authenticating Remix cookie sessions with Django cookie sessions

// app/session.server.ts

export const sessionIdSessionStorage = createCookieSessionStorage({
  cookie: {
    name: 'sessionid',
    path: '/',
    secrets: [SESSION_SECRET],
    secure: process.env.NODE_ENV === 'production',
    // More cookie options could be added here, but we will be using the cookie options from the fetch responses later.
  },
})

// app/routes/login.tsx

import type { ActionFunction, CookieSerializeOptions } from 'remix'
import setCookie from 'set-cookie-parser'
import { sessionIdSessionStorage } from '~/session.server'

const LOGIN_QUERY = /* GraphQL */ `
  mutation Login($username: string, $password: string) {
    ...
  }
`

export const action: ActionFunction = ({ request }) => {
  const formData = await request.formData()
  const username = formData.get('username')
  const password = formData.get('password')
  const response = await fetch('https://my-backend.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: LOGIN_QUERY,
      variables: {
        username,
        password,
      }
    })
  })

  if (response.status !== 200) {
    return ...
  }

  // Ensure that the response has a `Set-Cookie` header. It's required for every subsequent request that requires authentication.
  const setCookieHeader = response.headers.get('Set-Cookie')

  if (!setCookieHeader) {
    // No set cookie header meant something went wrong. Return an error.
    return ...
  }

  // Parse the cookies and find the `sessionid` cookie.
  const parsedResponseCookies = setCookie.parse(setCookie.splitCookiesString(setCookieHeader))
  const sessionIdCookie = parsedResponseCookies.find((cookie) => cookie.name === 'sessionid')

  if (!sessionIdCookie) {
    // No `sessionid` cookie in the fetch response means something went wrong.
    return ...
  }

  // Create the headers that will need to be returned to the browser. These headers are needed for every subsequent request that require authentication.
  const headers = new Headers()

  // Store the response's `sessionid` cookie into the headers.
  const { name, value, ...sessionIdCookieSerializeOptions } = sessionIdCookie
  const sessionIdSession = await sessionIdSessionStorage.getSession(request.headers.get('Cookie'))
  sessionIdSession.set(name, value)
  headers.append(
    'Set-Cookie',
    await sessionIdSessionStorage.commitSession(
      sessionIdSession,
      // Use the response's `sessionid` cookie serialization options.
      sessionIdCookieSerializeOptions as CookieSerializeOptions,
    ),
  )

  // Make sure to return a response with the headers you just created.
  return redirect("/profile", { headers })
}

const Login = () => {
  const actionData = useActionData()
  return ...
}

export default Login

// app/routes/profile.tsx

import type { LoaderFunction } from 'remix'
import { json, redirect, useLoaderData } from 'remix'
import { sessionIdSessionStorage } from '~/session.server'

const PROFILE_QUERY = /* GraphQL */ `
  query Profile {
    ...
  }
`

export const loader: LoaderFunction = ({ request }) => {
  // The browser should automatically send the `sessionid` header cookie when this route is loaded.
  const sessionIdSession = await sessionIdSessionStorage.getSession(request.headers.get('Cookie'))

  // Ensure that the `sessionid` is present.
  if (!sessionIdSession.has('sessionid')) {
    // If it is not present, then the user has not been logged in.
    throw redirect('/login')
  }

  const response = await fetch('https://my-backend.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // IMPORTANT: send the `sessionid` cookie with the fetch request! This will tell your backend that the fetch is user-authenticated.
      Cookie: Object.entries(sessionIdSession.data)
        .map(([key, value]) => `${key}=${value}`)
        .join('; '),
    },
    body: JSON.stringify({
      query: PROFILE_QUERY,
    })
  })

  // Add some checks to make sure the fetch went through without errors.
  if (!response.ok || response.status !== 200) {
    // Return some errors or throw a redirect.
    return ...
  }

  const result = await response.json()

  // OPTIONAL: There's a chance that your backend returned new `sessionid` cookie headers in the profile query fetch as well. You could perform the same steps from the login action to store the new `sessionid` cookie in the browser.
  // const headers = new Headers()
  // const setCookieHeader = response.headers.get('Set-Cookie')
  // ...
  // return json(result, { headers })

  return json(result)
}

const Profile = () => {
  const loaderData = useLoaderData()
  return ...
}

export default Profile