How to Add Github Login to Supabase
Github Login Supabase Authentication tutorial
🚀 Experienced Software Developer | Passionate Problem Solver | Creative Coder With over a decade of dedicated experience in software development, I bring a wealth of expertise across various domains of frontend and backend website and application development. My journey in the tech world has been marked by a fervent passion for problem-solving, coding excellence, and innovative design. Key Skills: Languages: HTML5, CSS3, Javascript, PHP, C# Frameworks & Libraries: Vue.JS, Nuxt, Ionic Content Management System: Wordpress Game Development: Proficient in designing, programming, and publishing Unity games Beyond traditional development, I nurture a keen interest in game development. I have not only designed and programmed mini Unity games using C#, but I've also actively participated in online game jams to refine my techniques and elevate my programming skills. Being an integral part of a religious community, I've embraced a commitment to continuous personal and professional growth. In addition to my technical prowess, I have honed valuable soft skills through ongoing participation in seminars on communication, leadership, team collaboration, public speaking, accurate reading, and personality development. These skills equip me to work seamlessly as part of a team, take the lead, train others, and confidently operate independently when needed. Join me on this exciting journey as I share insights, tips, and experiences from the dynamic world of software development and game design. Let's explore the endless possibilities of code and creativity together!
If you are anything like me, you like to find a tutorial that breaks down the documentation for certain software, be it CMS, backend, or styling.
As I was creating full-stack applications with Supabase, I noticed a need for more tutorials on integrating providers for logging in with Supabase.
In this post, you will learn:
How to create a project in Supabase and enable Github Authentication
How to create a Github Oauth App
How to connect Github to Supabase
So, if you want to know any of these things, please continue. If you prefer video content please visit my YouTube Shorts on this topic.
How to create a project in Supabase
The first step to creating the GitHub login is to have a project in Supabase. They offer two projects on the free tier, perfect for small projects and beginners to the platform.
Once registered, you can create a new organization and then a project in the Dashboard, as shown below.
Go to the authentication section and enable GitHub in the providers section
Screenshot showing GitHub authentication in Supabase
Supabase requires a Client ID and a Client secret to link to GitHub so it provides you with a callback url, copy it and store this for the next step.
How to create a Github Oauth App
Now that we have enabled Github authentication we need to create an application on Github to connect to the callback URL on Supabase.
To do this we will go to our Github profile and navigate to developer settings.
Once we have arrived at the developer settings we will see Github OAuth Apps.
Create a New Oauth App by filling out the requested items:
Title of the application
Logo image— if you have one
Redirect URL — enter “http://localhost:3000” or the dev environment URL for testing
Note: We will be creating an application in Nuxt 3 next so please use localhost:3000.
Authorization callback URL — this is the URL you copied from Supabase
Once completed you will see the Client ID and a button to generate your Client secret. Copy these items and navigate back to Supabase to complete the process.
How to add Github Login to Supabase
Once back in the Supabase site, open the provider settings and place the Client ID and the Client Secret in the relevant areas.
Congratulations you have now successfully integrated GitHub Login with Supabase.
Next steps
In the next tutorial, we will take this integration and create a full-stack application using frontend frameworks like Nuxt and Astro js.
Thank you for taking the time to read this tutorial. I also would like some feedback on what integration you would like to see next.
