mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
3f205627e0
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature — the visual redesign itself. Part 5 of 6 in a stack that splits the library redesign into reviewable pieces. The four PRs beneath it carry the build, content and Markdown work; what's left here is layout, navigation and styling. ## What is the current behavior? The library is laid out like a documentation site: a sidebar tree of framework folders, a homepage that lists links, and a guide page that opens with prose. That shape suits reference material, but the library's job is to help someone find a block and install it — and the sidebar is the only way to discover one. ## What is the new behavior? The homepage is the catalog itself — blocks grouped by what they do (authentication, database, storage, realtime, messaging, AI, foundations) rather than by framework, each with a preview of what it renders, filterable by category. Navigation moves into a site header whose Explore menu opens the same categories, so the catalog is reachable from any page and the per-page sidebar tree is gone. A guide opens with what the reader came for: the block's name, the install command, and a preview pane with tabs — the running component and its files — before any prose. The file tree that used to sit mid-page under "Folder structure" is one of those tabs. Every guide also offers a copy of the agent prompt that points at its Markdown. Getting-started pages get the same treatment: the quickstart is now a framework-tabbed walkthrough rather than a wall of setup links. ## Additional context `BlockOverviewTabs` renders Preview and Files here. #50369, stacked on top of this one, adds the third "What's added" tab — it is the only part of the redesign that depends on the new resource analyzer, which is why it sits above this PR rather than below it. Also removes what the redesign orphaned: the table-of-contents component and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav and command-item configuration the new header replaced. The block source changes are typography only — auth card titles move from `text-2xl` to `font-medium text-lg tracking-normal` — which is what regenerates the auth registry artifacts. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a redesigned Supabase Library catalog with categorized blocks, framework-aware navigation, previews, file views, and installation actions. * Added framework-specific quickstart guides for Next.js, React, Vue, Nuxt, React Router, and TanStack Start. * Added copy-to-clipboard prompts, “Open in v0” actions, starter templates, and richer visual previews. * **Improvements** * Updated documentation layouts, FAQ content, typography, navigation, accessibility, and responsive behavior. * Improved mobile navigation, framework selection, and standardized block installation guidance. * Refined authentication and social-login block presentation with more consistent heading styles. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
66 lines
3.1 KiB
Plaintext
66 lines
3.1 KiB
Plaintext
---
|
||
title: Social Authentication
|
||
description: Social authentication block for Next.js
|
||
preview: |-
|
||
<BlockOverview name="social-auth-nextjs" showFiles>
|
||
<BlockPreview name="social-auth/auth/login" />
|
||
</BlockOverview>
|
||
---
|
||
|
||
<Callout className="mt-4">
|
||
The block is using Github provider by default, but can be easily switched by changing a single
|
||
parameter.
|
||
</Callout>
|
||
|
||
## Installation
|
||
|
||
<BlockItem name="social-auth-nextjs" />
|
||
|
||
This block includes the [Supabase client](/library/docs/nextjs/client). If you already have one installed, you can skip overwriting it.
|
||
|
||
## Usage
|
||
|
||
Once you install the block in your Next.js project, you'll get all the necessary pages and components to set up a social authentication flow.
|
||
|
||
### Getting started
|
||
|
||
After installing the block, you'll have the following environment variables in your `.env.local` file:
|
||
|
||
```env
|
||
NEXT_PUBLIC_SUPABASE_URL=
|
||
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
|
||
```
|
||
|
||
- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nextjs) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
|
||
|
||
- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
|
||
|
||
### Setting up third party providers
|
||
|
||
We support a wide variety of social providers that you can use to integrate with your application. The full list is available [here](https://supabase.com/docs/guides/auth/social-login).
|
||
This block uses the PKCE flow with GitHub as the provider. To switch providers, just update the `provider` field in the `supabase.auth.signInWithOAuth` call. Enable the provider you want to use under [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers) in the Supabase Dashboard and add the necessary credentials.
|
||
|
||
### Setting up routes and redirect URLs
|
||
|
||
1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
|
||
1. Update the redirect paths in `login-form.tsx` to point to your app’s logged-in routes. Our examples use `/protected`, but you can set this to whatever fits your app.
|
||
1. Visit `http://your-site-url/auth/login` to see this component in action.
|
||
|
||
<Callout type="info">
|
||
|
||
You can use this block with the Pages router by simply moving the routes from the `app` folder into the `pages` folder and renaming them. Example instead of `app/login/page.tsx`, you'd create a `pages/login.tsx` file.
|
||
|
||
</Callout>
|
||
|
||
### Combining social auth with password-based auth
|
||
|
||
If you want to combine this block with the password-based auth, you need to:
|
||
|
||
- Copy the `handleSocialLogin` function into the password-based `login-form.tsx` component and bind it to a "Login with ..." button.
|
||
- Copy the `@/app/auth/oauth/route.ts` in your app under the same route.
|
||
|
||
## Further reading
|
||
|
||
- [Social login](https://supabase.com/docs/guides/auth/social-login)
|
||
- [Authentication error codes](https://supabase.com/docs/guides/auth/debugging/error-codes)
|