Document how to use Auth UI with SSR about auth-ui HOT 15 OPEN

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

from auth-ui.

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",
    },
  }}
/>

from auth-ui.

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 😅

from auth-ui.

Has supabase given up on supporting nextjs?

from auth-ui.

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

from auth-ui.

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)

from auth-ui.

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.

from auth-ui.

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

from auth-ui.

@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 .

from auth-ui.

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.

from auth-ui.

@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.

from auth-ui.

@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...

from auth-ui.

Any PR we can look into this?

from auth-ui.

bump

from auth-ui.

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)

from auth-ui.