Skip to content

Instantly share code, notes, and snippets.

@meetbryce
Created September 23, 2022 14:47
Show Gist options
  • Save meetbryce/a894b0e8578561a73f7294973f7cf705 to your computer and use it in GitHub Desktop.
Save meetbryce/a894b0e8578561a73f7294973f7cf705 to your computer and use it in GitHub Desktop.
Hydration error using Auth.useUser()
import {Auth} from '@supabase/ui';
import styles from '../styles/Home.module.css';
import Meta from '../components/Meta';
import Header from '../components/Header';
import {supabase} from '../lib/initSupabase';
// export async function getStaticProps() {}
const LoginPage = () => {
const {user} = Auth.useUser();
console.log({user});
if (user) {
return (
<div className={styles.container}>
<Meta titlePrefix={`Login`} description={'todo'}></Meta>
<Header />
<main className={styles.main}>
<div
className='w-full h-full flex flex-col justify-center items-center p-4'
style={{minWidth: 250, maxWidth: 600, margin: 'auto'}}
>
<h1>authorized content goes here</h1>
<button
className='btn-black w-full mt-12'
onClick={async () => {
const {error} = await supabase.auth.signOut();
if (error) console.log('Error logging out:', error.message);
}}
>
Logout
</button>
</div>
</main>
</div>
);
}
return (
<div className={styles.container}>
<Meta titlePrefix={`Login`} description={'todo'}></Meta>
<Header />
<main className={styles.main}>
<div className='w-full h-full flex justify-center items-center p-4'>
<div>
<Auth
supabaseClient={supabase}
providers={['google', 'github']}
socialLayout='horizontal'
socialButtonSize='xlarge'
/>
</div>
</div>
</main>
</div>
);
};
export default LoginPage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment