Authentication
Before creating the auth components & pages for your application, you will need to setup Supabase and a Google account for the OAuth provider.
After you finish the setup provided by us, sending the users to your Auth page can be done in 2 ways:
1. By link:
app/pricing/page.tsx
export default function LinkButtonExample() {
return (
<a
href="/dashboard/signin"
>
<button className="flex items-center justify-center rounded-full bg-gradient-to-tr from-brandGradient-500 to-brandGradient-400 px-4 py-5 text-sm font-medium text-white transition duration-200 hover:shadow-[0px_21px_27px_-10px_rgba(96,_60,_255,_0.48)_!important]">
Get started now for Free
<MdChevronRight className="mt-0.5 h-4 w-4" />
</button>
</a>
);
}
2. By redirect (in case of routes inteded for user access):
app/pricing/page.tsx
import {
getSession,
getUserDetails,
getSubscription,
} from '@/app/supabase-server';
import { redirect } from 'next/navigation';
export default async function RedirectExample() {
const [session, userDetails, subscription] = await Promise.all([
getSession(),
getUserDetails(),
getSubscription(),
]);
if (!session) {
return redirect('/dashboard/signin');
} else {
redirect('/dashboard/ai-generator');
}
}