Solid.js Authentication with Supabase Tutorial | Build a Secure Login System 🔒
Welcome to this hands-on tutorial on integrating authentication with Solid.js and Supabase!
In this video, we'll guide you through setting up a secure login system using the Solid.js framework and Supabase for authentication and database services. 🛠️💻
Your support is critical to keep the channel running -
🎩 Become a Patron: / bekbrace
🎗️ Become a member: Join @BekBrace
☕ Buy me a coffee: https://ko-fi.com/bekbrace
🪙 Bitcoin address:
bc1q0nk7e0mjmcjzy5c8p8kzr8smem46ug5mrnh2td
⚠️ It’s very easy to help the channel ⚠️
➊ Like 👍 or 👎 the video
➋ Write a comment 💬 under the video (I answer almost everyone)
➌ Send video ✉️ to friends via social networks
➍ Watch the rest of the videos 🎥 on the channel.
✔️Every completed item makes the channel better!
Thanks friends! 🤝 🤗 👐
📚 GitHub Repo: https://github.com/BekBrace/solidJs_s...
🔍 Prerequisites:
Before we dive in, make sure you have Node.js, npm, and a Supabase account ready for authentication and database needs.
⚙️ Getting Started:
Navigate to the project directory through GitHub repo.
cd solidjs-supabase-auth
Create a Supabase project and set up authentication.
Sign up: Supabase
Create a project and get the API URL and public key.
Configure Supabase credentials:
Create a .env.local file and add your Supabase URL and public key:
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_PUBLIC_KEY
Start the Solid.js development server:
npm run dev
📂 Application Structure:
components/Register.js: User registration component.
components/Login.js: User authentication component.
components/Dashboard.js: Authenticated user dashboard.
📖 Additional Resources:
Solid.js Documentation: https://solidjs.com/docs/latest
Supabase Documentation: https://supabase.io/docs
🔧 Available Scripts:
npm run dev or npm start: Run the app in development mode.
Open http://localhost:3000 to view it in the browser.
npm run build: Build the app for production to the dist folder. Deploy it to any static host provider like Netlify, Surge, Now, etc. for a live application!
🚀 Ready to build a secure and robust login system? Let's dive in! 💪⚡️
#SolidJS #Supabase #Authentication #WebDevelopment #Tutorial
⏰ Timestamps:
0:00 Intro
0:33 What is Solid.js ?
3:13 React.js Vs Solid.js
3:44 Supabase
7:25 Building Solid.js project
10:03 Install Supabase Dependencies
13:16 Building Login Page
23:52 Building Register Page
29:02 Building Dashboard Page
32:53 Styling in index.css
42:35 Friends' words of appreciation :)
43:07 Create Supabase Account
46:14 Create .env file for API key
1:06:07 App Testing
1:08:24 Outro
My VS Code Theme
GrunBoxTheme
vscode-icons
Caskadiya Cove Font
My NVIM Theme
JellyFish Theme
🚨 Don't forget to like, subscribe, and hit the bell for more tutorials! Happy coding! 🚀👩💻👨💻
Watch video Solid.js Authentication with Supabase Tutorial | Build a Secure Login System 🔒 online, duration hours minute second in high quality that is uploaded to the channel Bek Brace 01 January 1970. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 1,367 times and liked it 52 visitors.
