Creating a Supabase client for SSR

npm install dotenv

yarn add dotenv

pnpm add dotenv

import { PUBLIC_SUPABASE_PUBLISHABLE_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
import type { LayoutLoad } from './$types'
import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'

export const load: LayoutLoad = async ({ fetch, data, depends }) => {
  depends('supabase:auth')

  const supabase = isBrowser()
    ? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY, {
        global: {
          fetch,
        },
      })
    : createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY, {
        global: {
          fetch,
        },
        cookies: {
          getAll() {
            return data.cookies
          },
        },
      })

  /**
   * `getClaims` validates the JWT signature locally (for asymmetric keys) once
   * the relevant signing keys are available or cached, and returns the decoded
   * claims. While an initial or periodic network request may be required to
   * fetch or refresh keys, this is both faster and safer than `getSession`,
   * which does not validate the JWT.
   */
  const { data: claimsData, error } = await supabase.auth.getClaims()
  const claims = error ? null : claimsData?.claims

  return { supabase, claims }
}

import type { LayoutServerLoad } from './$types'

export const load: LayoutServerLoad = async ({ cookies }) => {
  return {
    cookies: cookies.getAll(),
  }
}

---
import { createServerClient, parseCookieHeader } from "@supabase/ssr";

const supabase = createServerClient(
  import.meta.env.PUBLIC_SUPABASE_URL,
  import.meta.env.PUBLIC_SUPABASE_PUBLISHABLE_KEY,
  {
    cookies: {
      getAll() {
        return parseCookieHeader(Astro.request.headers.get('Cookie') ?? '')
      },
      setAll(cookiesToSet, headers) {
        cookiesToSet.forEach(({ name, value }) =>
          Astro.cookies.set(name, value))
        Object.entries(headers).forEach(([key, value]) =>
          Astro.response.headers.set(key, value)
        )
      },
    },
  }
);
---

<script>
  import { createBrowserClient } from "@supabase/ssr";

  const supabase = createBrowserClient(
    import.meta.env.PUBLIC_SUPABASE_URL,
    import.meta.env.PUBLIC_SUPABASE_PUBLISHABLE_KEY
  );
</script>

import { createServerClient, parseCookieHeader } from '@supabase/ssr'
import type { APIContext } from 'astro'

export async function GET(context: APIContext) {
  const responseHeaders = new Headers()

  const supabase = createServerClient(
    import.meta.env.PUBLIC_SUPABASE_URL,
    import.meta.env.PUBLIC_SUPABASE_PUBLISHABLE_KEY,
    {
      cookies: {
        getAll() {
          return parseCookieHeader(context.request.headers.get('Cookie') ?? '')
        },
        setAll(cookiesToSet, headers) {
          cookiesToSet.forEach(({ name, value }) => context.cookies.set(name, value))
          Object.entries(headers).forEach(([key, value]) => responseHeaders.set(key, value))
        },
      },
    }
  )

  // Build your response here, and pass `responseHeaders` to it. Without them a
  // shared cache can store this response along with its Set-Cookie header.
  return new Response(null, { headers: responseHeaders })
}

import { createServerClient, parseCookieHeader } from '@supabase/ssr'
import { defineMiddleware } from 'astro:middleware'

export const onRequest = defineMiddleware(async (context, next) => {
  const responseHeaders = new Headers()

  const supabase = createServerClient(
    import.meta.env.PUBLIC_SUPABASE_URL,
    import.meta.env.PUBLIC_SUPABASE_PUBLISHABLE_KEY,
    {
      cookies: {
        getAll() {
          return parseCookieHeader(context.request.headers.get('Cookie') ?? '')
        },
        setAll(cookiesToSet, headers) {
          cookiesToSet.forEach(({ name, value }) => context.cookies.set(name, value))
          Object.entries(headers).forEach(([key, value]) => responseHeaders.set(key, value))
        },
      },
    }
  )

  const response = await next()
  responseHeaders.forEach((value, key) => response.headers.set(key, value))
  return response
})

import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
import { appendHeader, defineEventHandler, getHeader, setHeader } from 'h3'

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()

  const supabase = createServerClient(
    config.public.supabaseUrl,
    config.public.supabasePublishableKey,
    {
      cookies: {
        getAll() {
          return parseCookieHeader(getHeader(event, 'Cookie') ?? '')
        },
        setAll(cookiesToSet, cacheHeaders) {
          cookiesToSet.forEach(({ name, value, options }) => {
            appendHeader(event, 'Set-Cookie', serializeCookieHeader(name, value, options))
          })
          Object.entries(cacheHeaders).forEach(([key, value]) => setHeader(event, key, value))
        },
      },
    }
  )

  await supabase.auth.getClaims()

  return { ok: true }
})

import { createBrowserClient } from '@supabase/ssr'

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()

  const supabase = createBrowserClient(
    config.public.supabaseUrl,
    config.public.supabasePublishableKey
  )

  return {
    provide: {
      supabase,
    },
  }
})

const { createServerClient, parseCookieHeader, serializeCookieHeader } = require('@supabase/ssr')

exports.createClient = (context) => {
  return createServerClient(process.env.SUPABASE_URL, process.env.SUPABASE_PUBLISHABLE_KEY, {
    cookies: {
      getAll() {
        return parseCookieHeader(context.req.headers.cookie ?? '')
      },
      setAll(cookiesToSet, headers) {
        cookiesToSet.forEach(({ name, value }) =>
          context.res.appendHeader('Set-Cookie', serializeCookieHeader(name, value))
        )
        Object.entries(headers).forEach(([key, value]) => context.res.setHeader(key, value))
      },
    },
  })
}

require("dotenv").config()

const express = require("express")

const { createClient } = require("./lib/supabase")

const app = express()

app.post("/hello-world", async function (req, res, next) {
  const { email, emailConfirm } = req.body
  ...

  const supabase = createClient({ req, res })
})

import { createServerClient, parseCookieHeader } from '@supabase/ssr'
import { SupabaseClient } from '@supabase/supabase-js'
import type { Context, MiddlewareHandler } from 'hono'
import { env } from 'hono/adapter'
import { setCookie } from 'hono/cookie'
import type { CookieOptions } from 'hono/utils/cookie'

import type { Database } from '../database.types'

declare module 'hono' {
  interface ContextVariableMap {
    supabase: SupabaseClient<Database>
  }
}

export const getSupabase = (c: Context) => {
  return c.get('supabase')
}

type SupabaseEnv = {
  VITE_SUPABASE_URL: string
  VITE_SUPABASE_PUBLISHABLE_KEY: string
}

export const supabaseMiddleware = (): MiddlewareHandler => {
  return async (c, next) => {
    const supabaseEnv = env<SupabaseEnv>(c)
    const supabaseUrl = supabaseEnv.VITE_SUPABASE_URL ?? import.meta.env.VITE_SUPABASE_URL
    const supabasePublishableKey =
      supabaseEnv.VITE_SUPABASE_PUBLISHABLE_KEY ?? import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY

    if (!supabaseUrl) {
      throw new Error('VITE_SUPABASE_URL missing!')
    }

    if (!supabasePublishableKey) {
      throw new Error('VITE_SUPABASE_PUBLISHABLE_KEY missing!')
    }

    const supabase = createServerClient(supabaseUrl, supabasePublishableKey, {
      cookies: {
        getAll() {
          return parseCookieHeader(c.req.header('Cookie') ?? '')
        },
        setAll(cookiesToSet, cacheHeaders) {
          cookiesToSet.forEach(({ name, value, options }) =>
            setCookie(c, name, value, options as CookieOptions)
          )
          Object.entries(cacheHeaders).forEach(([key, value]) => c.header(key, value))
        },
      },
    })

    c.set('supabase', supabase)

    await next()
  }
}

import { Hono } from 'hono'
import { csrf } from 'hono/csrf'

import { getSupabase, supabaseMiddleware } from './middleware/auth.middleware'

const app = new Hono()
app.use('*', csrf())
app.use('*', supabaseMiddleware())

const routes = app.get('/api/user', async (c) => {
  const supabase = getSupabase(c)
  const { data, error } = await supabase.auth.getClaims()

  if (error) console.log('error', error)

  if (!data?.claims) {
    return c.json({
      message: 'You are not logged in.',
    })
  }

  return c.json({
    message: 'You are logged in!',
    userId: data.claims.sub,
  })
})

app.post('/signout', async (c) => {
  const supabase = getSupabase(c)
  await supabase.auth.signOut()
  console.log('Signed out server-side!')
  return c.redirect('/', 303)
})

app.get('/instruments', async (c) => {
  const supabase = getSupabase(c)
  const { data, error } = await supabase.from('instruments').select('*')

  if (error) {
    console.error(error)
    return c.json({ error: error.message }, 500)
  }

  return c.json(data)
})

export type AppType = typeof routes

app.get('/', (c) => {
  return c.html(
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
        {import.meta.env.PROD ? (
          <script type="module" src="/static/client.js" />
        ) : (
          <script type="module" src="/src/client.tsx" />
        )}
      </head>
      <body>
        <div id="root" />
      </body>
    </html>
  )
})

export default app