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! 🚀👩💻👨💻
Смотрите видео Solid.js Authentication with Supabase Tutorial | Build a Secure Login System 🔒 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Bek Brace 01 Январь 1970. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 1,367 раз и оно понравилось 52 посетителям.
