You have an app where you need to authenticate your users, and instead of the old and boring email and password option, you want to spice things up and maybe provide a better user experience during the onboarding flow. Then Magic Link is the solution for you! In this article we will guide you through the process of setting up the Magic Link authentication with Supabase and WeWeb.
Watch our Youtube video for step-by-step instructions, or continue reading...
Set up your Supabase project
First, we need to set up your Supabase project, where you will authenticate your users. Each user that creates an account should be visible and accessible in our Supabase project.
1. Create a new Project.
2. In the left menu bar, select the Authentication tab.
3. Then we need to set up Providers, where we need to make sure that the Email option is enabled.
.png)
4. Once we’ve done that, we can configure our Email template. Select the Email template, then click the Magic link. As you can see, here we have an option to fully customize our email by editing the HTML body of it, but for testing purposes, we won’t be changing this right now.
5. The next step is to enable the possibility for users to actually sign up through our Supabase project. We need to navigate to the Project settings tab and make sure we allow new users to sign up. Select the auth tab and enable “users signups.”
.png)
6. The last part is only needed once you go live with your app, so if you are just trying to test this feature for now, you can skip it. In our Supabase project, we can set up the SMTP server for sending authentication emails. Now, Supabase allows us to send authentication emails through their built-in service, but it’s very rate-limited and is only suitable for test purposes. We will use the Supabase built-in option for testing, but if you want to use it in your live project, you need to set this up. Feel free to click the link in the description with step-by-step instructions on how to do this!
Awesome, now we’re done with the Supabase part and can start working on the WeWeb part!
Set up your Weweb project
In our WeWeb project, there are three main pages that we need to set up our Magic link authentication:
- Login page;
- Redirect page to inform the user they’ll receive the Magic link;
- And a page to navigate users once they click on the Magic link.
The login page can be very simple, all we need is an email input container and a submit button inside our form component.
The second page, which is shown to the user once they input their email and click on the submit button, doesn’t need any special components, as it’s only meant to inform the user that they should look to their email to receive the Magic link.
The last page is the one where we navigate the users once they click on the Magic link. Now, here we have multiple options, you can have a simple page like this which can be shown to the user for a couple of seconds, and then they are automatically redirected to the home page, or you can directly navigate them to any page within your project, depending on your desired user flow.
The next step is to set Supabase Authentication in Weweb.
1. In the top menu, select the tab “plugins”, then under the categories, select Authentication and add Supabase.
2. Now, we need to configure it. We need three things - Project URL, Public API key, and Private API Key.
3. Let’s find the Project URL. Go back to Supabase, select Project settings, and click on the API tab. Let’s copy the Project URL and paste it into the Weweb. Then we do the same thing with the public API and lastly with the Secret API key.
4. Next, we need to define where to navigate users if they are not signed in yet. Select the Login page so that all non-authenticated users are prompted to create an account. Skip the roles tables for now and complete the configuration process.
Set up WeWeb workflow
At this stage, we need to define what will happen after the user clicks the Submit button on the Login page.
1. Let’s open the page and select our form container. On the right side, you select the tab Workflows and create a new one.
2. Now we need to add actions. Click on the plus button and find the built-in function “Supahase login with Magic link”, which takes two arguments. The user's email and a page that the user should be redirected to when they click the Magic Link they received to their email.
3. Open the email field, and under the variables, choose “email - value”. Next, select the page where you want to navigate the user when they click on the link in the email.
4. For a better user experience, we can add another action, which allows us to navigate users to the page where we let them know that something happened (check your email). On the right side, under the page field, select that page. In our case is the welcome_check-email page.
URL configuration in Supabase
Great, we’re almost done! We just need to configure URLs so everything will work as it should.
1. Let’s go back to Supabase and click on the Authentication tab. Then select URL configuration.
2. For the Site URL, we will add a link to our Login page, as this is our default page in Weweb. In our case, we will use the EDITOR link, but if you have your app in the production or staging phase, then use that link.
3. Go back to Weweb, select the Login page, copy the link, and paste it into Supabase. Redirect URLs are the wildcards that the authentication providers are allowed to redirect post-authenticating. Use the same link, but at the end, add a slash and asterisk symbol (/*).
Testing
Now that we have finished all the necessary steps, we can test the flow!
Open the Login page and submit the form. As you can see, we are navigated to the page where we see that we should check our email for Magic Link. So, let’s open the email, and now, since this is not the live link yet, we need to copy it and paste it into our WeWeb editor tab. As you can see, the page where we are successfully logged in is now visible!
Make sure to follow our Youtube channel for more tips and tricks on the best Lowcode platforms like WeWeb, FlutterFlow, and Supabase!
