Comments (18)
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.
from auth-ui.
Same problem when using the Auth component with next.js client side. It will load without styles 1st then eventually load the styles in
from auth-ui.
1+
from auth-ui.
bump
from auth-ui.
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?
from auth-ui.
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
from auth-ui.
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
from auth-ui.
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.
🙃
from auth-ui.
This repo is not going to be updated: https://github.com/supabase/auth-ui#maintenance-mode
Interested to see what happens Next...
from auth-ui.
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).
from auth-ui.
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.
from auth-ui.
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
from auth-ui.
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
from auth-ui.
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.
from auth-ui.
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.
from auth-ui.
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
from auth-ui.
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!
from auth-ui.
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...
from auth-ui.
Related Issues (20)
- Password letter spacing bugs
- Layout shift caused by inconsistent margins
- Additional documentation required to get examples up and running HOT 1
- Documentation states only React supported HOT 1
- Typo in build script
- Kakao Social Login Icon is empty HOT 2
- Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'crypto.subtle.digest') in SocialAuth.svelte HOT 3
- auth-ui-svelte doesn't show loading_button_label
- Weird css loading on Auth UI page reload HOT 9
- EmailAuth cannot handle actions after successful login HOT 2
- Linkedin OIDC Button label and icon missing HOT 3
- Unable to change recovery redirect HOT 1
- A glitch when used on SvelteKit HOT 1
- UpdatePassword view password input placeholder not showing
- Improve docs on how to use auth-ui with otp HOT 2
- auth-ui-react throws Permission denied to access property "type" on Firefox
- What is the point of this? [React] HOT 1
- Twitter => X social login icon logo needs to be updated
- "Already have an account? Sign in" appears in places where this text doesn't make sense
- Auth UI Sign In Button doesn't redirect anywhere HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from auth-ui.