Feat/supabase auth guide #951
Conversation
- Add comprehensive guide for integrating Supabase Web3 authentication with Solana wallets - Guide covers setup, wallet connection, authentication flow, protected routes, and best practices - Update meta.json to include the new guide in the Get Started section
- Convert Section 6 setup steps to use <Steps> and <Step> components - Add <Callout type="warn"> for critical Web3 auth step - Add <Callout type="warn"> for Devnet rate limits warning - Format code blocks and improve consistency with other guides
|
@resourcefulmind is attempting to deploy a commit to the Solana Foundation Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
GuiBibeau
left a comment
GuiBibeau
left a comment
There was a problem hiding this comment.
Great start. We need to focus on narrowing down:
- Newer version everywhere(next.js, node.js), let's avoid the AI suggested version which are already out of date. If the template needs to be updated let's also send a PR to update them.
- Wrong cloning instructions.
create-solana-dappmakes this way more easier than cloning the entire template repo. (see image). The cloning instructions are copyable - Let's add in the link to the template in the tutorial: https://templates.solana.com/supabase-auth.
- Let's narrow down the tutorial to only getting started and happy path. The rest is too much information for a dev reading this to use the template.
- Let's avoid web3 unless it is a code method and such. Solana goes beyond web3 and is fully fledged as a technology paltform.
| date: 2025-01-22T00:00:00Z | ||
| difficulty: beginner | ||
| title: "Supabase Auth + Solana Deep Guide" | ||
| seoTitle: "Supabase Auth + Solana Deep Guide" |
There was a problem hiding this comment.
should that not be a bit more descriptive? Without spamming keywords, we should ensure we start from the end result:
What would a somebody ask an LLM or search on google to end up on this post.
Let's find a better title like:
"How to implement authentication with Supabase and Solana as the Identity Provider"
Title is just an example, reverse engineer the intent of the engineer to craft your title
|
|
||
| ## Table of Contents | ||
|
|
||
| 1. [Introduction](#1-introduction) |
There was a problem hiding this comment.
I think the table of content is automatically generated from the headers. Confirm by running this locally and delete the table of content here if needed
|
|
||
| ## 1. Introduction | ||
|
|
||
| This guide shows you how to build a [Solana](https://solana.org) app with wallet |
There was a problem hiding this comment.
.org is the solana foundation website. If you keep a link here have it be solana.com/developer (validate the right one don't copy paste this)
Validate also if it really helps SEO to link back to the current site this will be on. If there's no benefits let's remove it, it's non needed cognitive overload from a pure tutorial perspective
| authentication using [Supabase](https://supabase.com). Users sign in with their | ||
| Phantom or Solflare wallet. No email. No passwords. Just a wallet signature. | ||
|
|
||
| Traditional auth means managing user accounts, password resets, and email |
There was a problem hiding this comment.
let's use authentication instead of Auth. Let's update everywhere we use auth unless it refers to a product name.
| verification. With Solana wallet auth, users prove they control a wallet | ||
| address. That's it. It's simpler for them. It's simpler for you. | ||
|
|
||
| The template uses Supabase's Web3 authentication. Supabase handles the |
There was a problem hiding this comment.
Let's avoid the term web3 unless we are refering to the actual supabase method. Web3 as a term should be retired when talking about Solana.
| 1. Go to [supabase.com](https://supabase.com) and sign in | ||
| 2. Click "New Project" | ||
| 3. Fill in your project details: | ||
| - Name it something memorable (like "solana-auth-test") | ||
| - Set a database password (save this somewhere safe) | ||
| - Choose a region close to you | ||
| 4. Wait for the project to finish provisioning (about 2 minutes) | ||
|
|
||
| Once your project is ready, you'll see the project dashboard. Don't close this | ||
| tab. You'll need it for the next steps. | ||
|
|
||
| Supabase needs a project to store user sessions and handle authentication. Each | ||
| project has its own database and API keys. The free tier gives you everything | ||
| you need for development. |
There was a problem hiding this comment.
Is it worth doing a short video or screen shot section or not?
| If you see "Invalid environment variables" in your terminal, check your | ||
| `.env.local` file. Make sure both keys are set correctly. If you see "Port 3000 | ||
| is already in use", something else is running on that port. Kill that process or | ||
| change the port with `npm run dev -- -p 3001`. |
There was a problem hiding this comment.
no need for the level of details
| </Step> | ||
| </Steps> | ||
|
|
||
| ## 7. Connecting Your Wallet |
There was a problem hiding this comment.
Should we let people know they need a wallet installed?
| blockchain data. Then you authenticate with Supabase to create a session. | ||
| They're separate steps. | ||
|
|
||
| **Separation of concerns** - You might want to show wallet balances without |
There was a problem hiding this comment.
remove, non needed to get started.
| ### Verifying the connection | ||
|
|
||
| After connecting, check the header. The button should show your wallet address. | ||
| If you see "Select Wallet" still, the connection didn't work. Try clicking it | ||
| again. | ||
|
|
||
| You can also check the browser console. Open DevTools (F12) and look for errors. | ||
| If you see "wallet not found" or similar, your wallet extension might not be | ||
| enabled. Make sure it's installed and active in your browser. | ||
|
|
||
| ### Understanding the network | ||
|
|
||
| The template connects to Solana Devnet by default. Devnet is a test network. It | ||
| has free test tokens. You can see the network in the header next to the wallet | ||
| button. It should say "Devnet" or "Localnet". | ||
|
|
||
| Devnet is safe for testing. You can request airdrops without spending real | ||
| money. Transactions are fast and free. When you're ready for production, you'll | ||
| switch to Mainnet. | ||
|
|
||
| The network configuration is in `src/components/solana/solana-provider.tsx`. It |
There was a problem hiding this comment.
I feel like at this point users have the happy path handled right? Do we need to discuss the rest you think? I'd be happy if we cut to this point already without going deeper about airdrop and such.
We want this tutorial to be a super straight forward way of understanding supabase + solana. I'd avoid all the extra bits of details.
2 participants
Add Supabase Auth + Solana Deep Guide
Summary
Adds a comprehensive guide for integrating Supabase Web3 authentication with Solana wallet-based applications. Includes step-by-step setup instructions, architecture explanations, troubleshooting, and best practices.
What's Included
apps/web/content/guides/getstarted/supabase-auth-guide.mdx<Steps>,<Callout>) consistent with other guidesmeta.jsonin Get Started sectionGuide Structure
14 sections covering: Introduction, Setup, Wallet Connection, Authentication, Protected Routes, Architecture Deep Dive, Extension Guide, Troubleshooting, Best Practices, and Conclusion.
Key Features
Testing
<Steps>,<Callout>) matching other guides