Skip to content

Instantly share code, notes, and snippets.

@meetbryce

meetbryce/supabase.tsx

Created September 23, 2022 14:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save meetbryce/a894b0e8578561a73f7294973f7cf705 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save meetbryce/a894b0e8578561a73f7294973f7cf705 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. meetbryce created this gist Sep 23, 2022.
    63 changes: 63 additions & 0 deletions supabase.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    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;