Login via github

'use client'

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

export function AuthButton() {
     const supabase = createClientComponentClient();

     const handleSignIn = async () => {
     await supabase.auth.signInWithOAuth({
     provider: 'github',
         options: {
         redirectTo: 'http://localhost:3000/auth/callback'
         }
})
     }
     const handleSignOut = async () => {
         await supabase.auth.signOut()
     }
return(
     <header>
         <button onClick={handleSignIn} type="button" className="text-white bg-[#24292F]focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center focus:ring-gray-500 dark:hover:bg-[#050708]/30 me-2 mb-2">
<svg className="w-4 h-4 me-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757 0 0 0 0 0 0 0 0 0 0 0 0 0 2,884,823c .044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2,726 1,016a9,409 9,409 0 0 1 4,962 0c1.89-1,282 2,717-1,016 2,717-1,016,366,83,402 1,768.1 2,623a3,827 3,827 0 0 1 1.02 2.659c 0 3,807-2,319 4,644-4,525 4,889a2,366 2,366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"/>
</svg>
Sign in with Github
</button>
         <button onClick={handleSignOut}>Sign Out</button>
     </header>
     )
}