Add server side rendering (SSR) support

[silentworks]

Add SSR support for the Auth UI so it will render when using a server side rendering framework like NextJS. Currently if this component is used on a SSR page it doesn't load until the client side code has loaded. Stitches allows for SSR in its config.

[alexanderwford]

I have the Auth login widget on a page in my /app folder on NextJS 13 and I'm getting hydration issues. The page is set to 'client only'; to use client rendering but what happens is the login box loads totally without styles, then figures itself out.

[mnai01]

Same problem when using the Auth component with next.js client side. It will load without styles 1st then eventually load the styles in

[muhaimincs]

1+

[maglev99]

Same problem when using the Auth component with next.js client side. It will load without styles 1st then eventually load the styles in

I'm getting the same issue running Next 13.4.2

the styles load after a split second but causes a flicker when the styles change

@silentworks is there a recommended workaround to fix this at the moment or just implement a simple timeout to wait a bit before displaying the component?

[Nedi11]

bump

[chriscarrollsmith]

How did you guys get this package working with SSR at all? I keep running into a webpack type error that suggests the package is using React's createContext and useContext hooks, which are not typically compatible with server-side rendering (SSR).

[Bartel-C8]

How did you guys get this package working with SSR at all? I keep running into a webpack type error that suggests the package is using React's createContext and useContext hooks, which are not typically compatible with server-side rendering (SSR).

Use this repo: https://github.com/mryechkin/nextjs-supabase-auth

[chriscarrollsmith]

How did you guys get this package working with SSR at all? I keep running into a webpack type error that suggests the package is using React's createContext and useContext hooks, which are not typically compatible with server-side rendering (SSR).

Use this repo: https://github.com/mryechkin/nextjs-supabase-auth

Thanks; that doesn't use the AuthUI package though.

[Nedi11]

How did you guys get this package working with SSR at all? I keep running into a webpack type error that suggests the package is using React's createContext and useContext hooks, which are not typically compatible with server-side rendering (SSR).

Use this repo: https://github.com/mryechkin/nextjs-supabase-auth

Thanks; that doesn't use the AuthUI package though.

I am using remix (tried both with vite and remix compiler), just followed the guide in the docs and it works

[chriscarrollsmith]

How did you guys get this package working with SSR at all? I keep running into a webpack type error that suggests the package is using React's createContext and useContext hooks, which are not typically compatible with server-side rendering (SSR).

Use this repo: https://github.com/mryechkin/nextjs-supabase-auth

Thanks; that doesn't use the AuthUI package though.

I am using remix (tried both with vite and remix compiler), just followed the guide in the docs and it works

Cool. These docs?

https://supabase.com/docs/guides/auth/auth-helpers/remix?language=ts

Maybe useOutletContext is the key. This is from '@remix-run/node'; I'm gonna guess it won't work with NextJS. I wonder if Next has something similar.

[Nedi11]

How did you guys get this package working with SSR at all? I keep running into a webpack type error that suggests the package is using React's createContext and useContext hooks, which are not typically compatible with server-side rendering (SSR).

Use this repo: https://github.com/mryechkin/nextjs-supabase-auth

Thanks; that doesn't use the AuthUI package though.

I am using remix (tried both with vite and remix compiler), just followed the guide in the docs and it works

Cool. These docs?

https://supabase.com/docs/guides/auth/auth-helpers/remix?language=ts

Maybe useOutletContext is the key. This is from '@remix-run/node'; I'm gonna guess it won't work with NextJS. I wonder if Next has something similar.

Those docs are for the auth itself not the ui, here is the ui: https://supabase.com/docs/guides/auth/auth-helpers/auth-ui

Only the supabase client I get from the one I initialize in root through outletContext (don't create a new one) explained in the docs you mentioned: https://supabase.com/docs/guides/auth/auth-helpers/remix?language=ts

[chriscarrollsmith]

ndaidong, thanks, interesting.

If I understand correctly what this is doing, it's basically just creating a standard React client-side context, which is passed down the tree, causing the AuthUI component to be rendered client-side rather than server-side. I don't think this component is actually being rendered server-side currently.

[zineanteoh]

using next 14.0.4 with @supabase/auth-ui-react ^0.4.6 and getting the same hydration issue. would appreciate any sort of progress on this issue, as it is affecting user experience. thanks!

[Nedi11]

using next 14.0.4 with @supabase/auth-ui-react ^0.4.6 and getting the same hydration issue. would appreciate any sort of progress on this issue, as it is affecting user experience. thanks!

style it yourself and don't rely on the library themes. Here is an example with tailwind https://github.com/Nedi11/supaweb/blob/master/app/routes/signin.tsx

[ARMATAV]

And when you realize none of these answers work out of the box, and all you want to do is horizontally layout your social providers like this without flicker;

You can use the following adjusted code;

components/Auth.tsx

"use client";

import { Auth as SupabaseAuth } from "@supabase/auth-ui-react";
import { createBrowserClient } from "@supabase/ssr";

const supabaseClient = createBrowserClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export const Auth = () => {
  return (
    <SupabaseAuth
      supabaseClient={supabaseClient}
      appearance={{
        extend: false,
        // needed instead of theme because auth ui broken on ssr
        className: {
          anchor:
            "text-sm underline mx-auto text-black/70 hover:text-black/50 transition-all",
          button:
            "bg-zinc-900 my-5 text-white rounded-lg p-2 hover:bg-zinc-700 transition-all",
          container: "flex flex-col",
          divider: "",
          input:
            "flex h-9 w-full rounded-md border border-input transition-all bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
          label: "mt-3 flex flex-col text-sm",
          loader: "",
          message: "text-red-500 text-center block mt-3",
        },
      }}
      providers={["apple", "google", "facebook"]}
      socialLayout="horizontal"
    />
  );
};

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/**
* Insanely annoying but I need to use this to target the buttons
* inside the auth UI, because currently their SSR doesn't work.
* 
* So if we don't do this, it will flicker the styles.
*/
/*
* The container for the social buttons (only when socialLayout="horizontal")
*/
.supabase-auth-ui_ui-container[direction="horizontal"][gap="medium"] {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important; /* Adjust the gap as needed */
}
/*
* Social buttons themselves
*/
.supabase-auth-ui_ui-container[direction="horizontal"][gap="medium"] button {
  padding: 20px !important;
  background-color: white !important;
  border: 1px solid #e5e7eb !important; /* This is the Tailwind CSS color for zinc-100 */
}
.supabase-auth-ui_ui-container[direction="horizontal"][gap="medium"]
  button:hover {
  background-color: #e5e7eb !important; /* Tailwind CSS color for zinc-200 */
}

This will break when you remove socialLayout="horizontal" because it won't match that check anymore, but you can adjust for it. I just don't have the time to make a more robust solution, but throw it into an LLM with the code above and the rendered output of the parent div in your chrome console and you'll get it working.

🙃

[ryanhalliday]

This repo is not going to be updated: https://github.com/supabase/auth-ui#maintenance-mode
Interested to see what happens Next...

[Nedi11]

If helpers very good => very easy to build ui
I like that they are prioritizing helpers given that there is no capacity to also improve this.

This repo is not going to be updated: https://github.com/supabase/auth-ui#maintenance-mode Interested to see what happens Next...

[ryanhalliday]

Just a note @Nedi11: Auth helpers are actually not recommended now either: https://supabase.com/docs/guides/auth/auth-helpers
Instead apparently @supabase/ssr is what we should use: https://supabase.com/docs/guides/auth/server-side-rendering