Authentication
NextBase comes with Email, Email + password and Third party providers authentication built-in.
It only has small wrappers around the supabase javascript client.
The authentication queries are present in the supabase-queries.ts file. Corresponding hooks are present within react-query-hooks.ts file. Both files are within the utils folder.
Supported auth methods
| Authentication Type | Description |
|---|---|
| Authentication using only the user's email. | |
| Email + Password | Authentication using the user's email and password. |
| Third Party Providers | Authentication using third-party providers. Examples given are Google, GitHub, and Twitter. Configuration is done via the Supabase dashboard. |
| Login with API Key | Authentication using an API key using Unkey (Nextbase Ultimate only). |
Providers
Providers are configured using the RenderProviders component. It renders all the providers passded to it as props. For eg: the login page component Login.tsx component renders providers like so
<RenderProviders
providers={['google', 'github', 'twitter']}
isLoading={providerMutation.isLoading}
onProviderLoginRequested={(provider) => {
providerMutation.mutate({
provider,
});
}}
/>You can configure whichever providers you like using the supabase dashboard. Head over to https://app.supabase.com/project/{your-project}/auth/providers and configure the providers you require.
They will automatically work in your frontend. No other configuration required.