Open in app

Sign in

Write

Sign in

Supabase: Setting up Authentication

Aditya Joshi
Coinmonks

--

1. Overview

In this article, we will learn how to set up authentication using supabase in angular. Supabase is an Open Source Firebase Alternative that creates a backend in less than 2 minutes. Start your project with a Postgres Database, Authentication, instant APIs, real-time subscriptions, and Storage.

For this tutorial I am using angular as my frontend framework, feel free to use any framework of your choice.

Source code can be found here

2. Prerequisite

  1. Angular should be installed
  2. Create a project on supabase.
  3. Create profiles table in the supabase database
create table profiles (id uuid references auth.users,name text);

3. Implementation

  1. We will start by creating a new angular project. I am creating the project with the name supabase-app . The app can be created using the command ng new supabase-app .

2. Once the angular project is created, we can install the supabase package using the command npm install @supabase/supabase-js .

3. Now, let's create the signup, login, and home component along with the authguard and the supabaseclient service.

4. Now it's time to set up the supabase with our angular app. Put the supabase project URL and the secret in the environment.ts file. You can find your project URL and secret at setting>API>Config.

5. Now we will create the supabase service, this service has the methods for user signup, login, and creating the user profile.

6. We have to create the signup form and login form in signup.component.html and login.component.ts .

7. In the signup process, we are capturing the name also and storing the name in the profiles table in the database.

8. Now it's time to set up the AuthGuard. We will check if the user session already exists and then redirect to thehome component, but if the session doesn’t exist, it will be redirected to the login component.

4. Conclusion

In this article we saw how we can implement authentication using supabase. Supabase also supports third party authentication OAuth provider like google signing, facebook login and many more. You can refer to the details documentation here.

If you find this article helpful do hit the clap button and follow me for more such informative articles.

You can find me on Linkedin or stalk me on GitHub? If that’s too social for you, just drop a mail to adityaprakashjoshi1@gmail.com if you wish to talk tech with me.

Join Coinmonks Telegram Channel and learn about crypto trading and investing

Also, Read

--

--

Aditya Joshi
Coinmonks

Written by Aditya Joshi

317 Followers
Writer for

I am a Software Engineer @Walmart and instructor @Udemy, working on Blockchain, and Kubernetes. Get in touch: linktr.ee/adityajoshi12