About Passwordless Sign-ins
Remembering passwords has become a headache these days. Password-less sign-in is in vogue, and naturally so! It is extremely convenient as users needn’t remember their passwords! User experience, user convenience, data & privacy protection and security are some of the important aspects that need to be considered, while developing an authentication system. According to my humble opinion, OTP-based password-less authentication is one of the simplest & safest ways to authenticate users.
A supermod is an independently deployable module of an application that has a scoped & well-defined functionality and that encapsulates both the frontend and backend functionalities. You can architect your application such that it is composed of several supermods working in tandem with each other. Broadly speaking, the supermod-based architecture makes your application modular and more maintainable, as it scales.
This tutorial demonstrates how to add the sign in functionality to your app using the SfUserAuth supermod. So brace yourself, get into your developer groove, on your mark, get set and go! 👨🔧👩🔧
💡 What's New In This Tutorial?
Authentication functionality is critical as your entire application will hinge on it. This tutorial demonstrates the use of the library SfUserAuth, which commoditizes the authentication functionality.
🤔 What Should You Know Prior To Starting?
🏆 What Will You Learn At The End Of This Tutorial?
Go ahead, play around with it.
Backend - The backend is based on the auto-scalable technologies of AWS, namely, DynamoDB & Lambda Functions. Worry not, backend coding knowledge is not required.
🚪 Step 1 - Sign In To Superflows Console
Creating the Superflows account is very simple. Go to console.superflows.dev. Click Get Started. If you don't have an account, sign up first. During sign in, submit your email, receive the otp, get it verified and sign in is done. Should you have any doubts, the video given below will guide you.
🧱 Step 2 - Create A New Supermod
If you are signing in for the first time, you will not have any previously created supermods. Click on the create button. Next page shows the available supermods. Choose the authentication supermod. On the new supermod page, give a name to the supermod. For instance, if the name of your project is ABC, a reasonable name for the supermod would be ABC-auth. Still, you are free to name it however you want. Note that the name string can contain alphabets, numbers and hyphens. Click the submit button and your supermod will be created.
Please refer to the video below.
🚀 Step 3 - Create A New Deployment
Click view and navigate to the supermod page. This supermod does not have any prior deployments. Go ahead, click on create. The new deployment page will open up. Admin email address is for the administrator account of the authentication supermod. Correspondence email address is the one, which will be used for email transactions, such as sending one-time-passwords.
Note that a verification email will be sent to the correspondence email address. Email sending will not work unless verification is completed succesfully.
Click on submit. If all goes well, the deployment will be created successfully. View it. You will see that it is being deployed. Deployment takes a few minutes to complete.
Coming back to this page after a few minutes, we see that the deployment is complete and the supermod is available for use.
Api Id - It is used to connect the frontend with the backend. This identifier is inserted into the frontend so that the frontend knows, which backend deployment to connect to.
Sample Code - This is the sample code provided for your convenience. You can download it and understand how to use the authentication supermod in your app.
Demo Instance - The sample code is also deployed onto an instance and provided to you. This helps you immediately experience the functionality of the supermod.
In case you have further doubts, please refer to the video below.
🛠 Step 4 - Test The Authentication Module
Open the deployment instance in a new tab.
New Account / Sign In
Click the sign in button from the navigation bar. The sign in page will load. Enter an email address, any email other than the admin email address. Then press submit. Account does not exist error will be thrown. This is because the account for the email address does not exist. Go to sign up.
Sign out if you are already signed in. Sign in with the administrator email address now. After administrator sign in is successful, the profile menu dropdown (the top right menu in the navigation bar) will show an admin menu. Click the authentication menu item from the admin menu. You will then be taken to the administrator section.
Administrator section is used for the following tasks:
- Looking up user information such as name, email address, active status, recent access logs
- Promoting an existing user to admin
- Demoting an existing user from admin
- Signing a user out
- Updating the name of a user
You can refer to the video given below:
🍱 Step 5 - Get The Sample Code Working
The purpose of the sample app is to give you a ready code-base for integrating the authentication microfrontend into your application. Download the code and run it inside your web server. It will start working out of the box.
The sample app contains the following files:
- This file functions as the entry point of the sample app
- It is simply a wrapper for the authentication supermod declared in auth.html
- If the user is signed in, it shows the sign in information
- If the user is not signed in, it shows a link to the sign in page
- This file integrates the authentication supermod
- It handles the sign in and sign out events as well
- Custom css styles are specified in this css stylesheet
Step 6 - Customize The Appearance
To customize the look and feel, you can utilize the css custom properties and parts that are exposed by the sf-user-auth components.
For your convenience, I have pre-created and open-sourced a few different themes. Go through them. Please feel free to use them however you want in your project. All the customizations are present in the styles.css file.
Theme - Slate
Theme - Taxi
Theme - Glass
Theme - Stark
- This tutorial demonstrated how to quickly setup the authentication supermod.
- The tutorial then showed how to consume it in your app.
- Lastly, the tutorial demonstrated the possible customization options.
Adding some resources below for your convenience.