Noob - How do I properly code a signOut function for my navbar using Supabase? (example attached)
Answered
Scottish Terrier posted this in #help-forum
Scottish TerrierOP
Hey guys!
Total noob here, learning the ropes with Supabase. I've coded a small app and now want to add a signOut feature in my navbar. Found an example online of using the form tag to signout, but it feels weird to have a form in my navbar, so there must be another way, would love to know how!
This is my navbar so far:
And this is my auth route:
How can I call it from my navbar, what's the best and most popular way of doing so? Many thanks ðŸ™
Total noob here, learning the ropes with Supabase. I've coded a small app and now want to add a signOut feature in my navbar. Found an example online of using the form tag to signout, but it feels weird to have a form in my navbar, so there must be another way, would love to know how!
This is my navbar so far:
const Navbar = () => {
return (
<header>
<ul>
<li>
<form action="/auth/signout" method="post">
<button className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Sign Out
</button>
</form>
<button
onClick={handleLogout}
className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
>
Sign Out
</button>
</li>
</ul>
</header>
);
};
export default Navbar;And this is my auth route:
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";
export async function POST(req) {
const cookieStore = cookies();
const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
const {
data: { session },
} = await supabase.auth.getSession();
if (session) {
await supabase.auth.signOut();
}
return NextResponse.redirect(new URL("/", req.url), { status: 302 });
}How can I call it from my navbar, what's the best and most popular way of doing so? Many thanks ðŸ™
Answered by Ray
I would suggest using server action for that
import { signout } from './actions.ts'
const Navbar = () => {
return (
<header>
<ul>
<li>
<form action={signout}>
<button className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Sign Out
</button>
</form>
</li>
</ul>
</header>
);
};
export default Navbar;
// actions.ts
'use server'
import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
export async function signout(formData: FormData) {
const supabase = createServerActionClient({ cookies })
const {
data: { session },
} = await supabase.auth.getSession();
if (session) {
await supabase.auth.signOut();
}
return redirect('/')
}4 Replies
@Scottish Terrier Hey guys!
Total noob here, learning the ropes with Supabase. I've coded a small app and now want to add a signOut feature in my navbar. Found an example online of using the form tag to signout, but it feels weird to have a form in my navbar, so there must be another way, would love to know how!
This is my navbar so far:
`const Navbar = () => {
return (
<header>
<ul>
<li>
<form action="/auth/signout" method="post">
<button className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Sign Out
</button>
</form>
<button
onClick={handleLogout}
className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
>
Sign Out
</button>
</li>
</ul>
</header>
);
};
export default Navbar;`
And this is my auth route:
`import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";
export async function POST(req) {
const cookieStore = cookies();
const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
const {
data: { session },
} = await supabase.auth.getSession();
if (session) {
await supabase.auth.signOut();
}
return NextResponse.redirect(new URL("/", req.url), { status: 302 });
}`
How can I call it from my navbar, what's the best and most popular way of doing so? Many thanks ðŸ™
I would suggest using server action for that
import { signout } from './actions.ts'
const Navbar = () => {
return (
<header>
<ul>
<li>
<form action={signout}>
<button className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Sign Out
</button>
</form>
</li>
</ul>
</header>
);
};
export default Navbar;
// actions.ts
'use server'
import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
export async function signout(formData: FormData) {
const supabase = createServerActionClient({ cookies })
const {
data: { session },
} = await supabase.auth.getSession();
if (session) {
await supabase.auth.signOut();
}
return redirect('/')
}Answer
and consider migrating to @supabase/ssr
Scottish TerrierOP
Magic! Server actions sound way more elegant for this. Been reading up about them, but as I've understood it they're very new still.
Thanks a bunch, I'll look through the code
Thanks a bunch, I'll look through the code