Login via github
Hello, can someone tell me if this code is correct because I don't get any errors or errors, but it can't give me the cookie.
'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>
)
}
'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>
)
}
1 Reply
Hi :vmathi: You may want to check the
redirectTo URL in your signInWithOAuth function. This URL should be the one where you want to redirect the user after they have successfully signed in with GitHub. If the URL is not correct or not properly configured in your GitHub OAuth application settings, it could cause issues.