Document how to use Auth UI with SSR

[louwers]

Chore

Describe the chore

It takes some work to use stiches with SSR: https://stitches.dev/docs/server-side-rendering

If someone tries to use this library now they will see an flash of unstyled components (including blown up images for the logos) and then a rehydration failure logged in the console.

[silentworks]

I've exposed the getCssText function from stitches from the component itself in the latest release 0.2.5. I need to test this to be sure its working as expected, please report if it doesn't work as expected if you get to test it before I do.

[jasperhartong]

Just ran into the same issue with SSR. The exposed getCssText doesn't seem to be working. It returns an empty string.

[imbhargav5]

@silentworks Doesn't seem to be working well with Next.js 13. Would love a proper guide here. I added the getCssText function but getting a server render mismatch and hence flash of unstyled content .

[MildTomato]

Hey everyone - Might have been a bit of an oversight by me to rely on stitches to inject css variables (this was before Next13 though..), hence what I think is causing the 'flash of styles'. There might be a better way for us to handle CSS properties for SSR situations, but I've never really looked into it.

As a workaround, you could use the className customization, and don't use any of the token based theming. It's not ideal but it should avoid the problem.

@silentworks mentioned maybe we should provide some plain CSS to emulate the themes* which you can easily add to your CSS setup. We could also provide tailwind classes as well since that might be a popular choice.

* there is still only 1 theme, I was meaning to add a few more at some point 😅

[darkostanimirovic]

I'm facing this too with Next 13. Plain CSS would be a good workaround – Tailwind classes even better in my case.

[silentworks]

Currently you can render this with Tailwind classes or your own classes for it to render in Next 13 or any SSR framework. I'm currently using these classes.

<Auth
  supabaseClient={supabase}
  showLinks={false}
  providers={[]}
  appearance={{
    extend: false, // necessary in order to not render default styles
    className: {
      container: "space-y-2 mb-4",
      label: "text-gray-500 py-2 mb-2 block w-full",
      input: "py-2 px-3 border text-gray-900 placeholder:text-gray-400 sm:text-sm sm:leading-6 rounded w-full mb-2",
      button: "w-full block bg-emerald-500 border border-emerald-700 hover:border-emerald-400 hover:bg-emerald-400 focus:bg-emerald-400 text-white font-semibold rounded px-4 py-3 mt-6",
      message: "font-regular text-center mb-4 block w-full p-4 text-base text-red-500 mt-5",
    },
  }}
/>

[dclark27]

Adding here that this package doesn't work in next 13 for me. Hoping for an update soon!

Signup / sign in / auth providers all also not working.

[JohnShahawy]

Has supabase given up on supporting nextjs?

[silentworks]

@JohnShahawy not that I know of. We have been working away at supporting NextJS as much as we can along with all the other SSR frameworks.

[Darren120]

@JohnShahawy not that I know of. We have been working away at supporting NextJS as much as we can along with all the other SSR frameworks.

any help? its not that hard to switch to tailwind...

[muhaimincs]

Any PR we can look into this?

[Nedi11]

bump

[akarabach]

I receive the error if not using client component

 ⨯ node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@supabase/auth-ui-react/dist/index.es.js (1180:14) @ eval
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function

[jon301]

Getting the same error as @akarabach

Next: 14.0.0 React: 18.2.0 @supabase/auth-ui-react: 0.4.6

 ⨯ ../node_modules/@supabase/auth-ui-react/dist/index.es.js (1180:14) @ eval
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/../../node_modules/@supabase/auth-ui-react/dist/index.es.js:945:78)

[tairosonloa]

As @akarabach said (cc @jon301 ) this happens because with the new app directory introduced in Next.js 13+, Next.js use server components by default.

Components that need hooks (context, use..., or as such as your case with Formik) needs to be classified as Client Components and they need to have the directive "use client" at the top of the source file.

So in my case, doing this was enough to get rid of the error and make it work:

'use client';

import React from 'react'
import {createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'

const supabase = createClient("...","...")

export default function Login() {
  return (
    <Auth supabaseClient={supabase}/>
  )
}

More information in Stack Overflow (it talks about Formik, but the problem, and thus the explanation, is the same)