SupabaseS
Supabase•4y ago
Rafael Vieira

Doubt - Social Login with NextJs and Typescript

Doubt - Social Login with NextJs and Typescript

Good morning people,

I have a doubt when the social login is performed after configured in subase, it is saved in your database or you have to do some more step by step, because I didn't identify this in the documentation. If anyone has a doc on how to do this in React, NextJs or Js, help me.

I'll put here my subaseClient and My Button component to perform the github social login.
import { Session, createClient } from '@supabase/supabase-js';
import { useState } from 'react';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_CLIENT_KEY;
const supabaseClient = createClient(supabaseUrl, supabaseKey);
const useSupabase = () => {
  const [session, setSession] = useState<Session>(
    supabaseClient.auth.session()
  );
  supabaseClient.auth.onAuthStateChange(async (_event, session) => {
    setSession(session);
  });
  return { session, supabaseClient };
};
export { useSupabase, supabaseClient };

Component Button
import siteMetadata from '@/data/siteMetadata';
import { GithubLoginButton } from 'react-social-login-buttons';

export function AuthGithubButon({ supabase }) {
  function handleGitHubLogin() {
    supabase.auth.signIn(
      { provider: 'github' },
      { redirectTo: `${siteMetadata.siteUrl}/community-wall` }
    );
  }
  return (
    <div className={`md:w-auto md:inline-flex`}>
      <GithubLoginButton onClick={handleGitHubLogin}>
        <span>GitHub</span>
      </GithubLoginButton>
    </div>
  );
}
Was this page helpful?