durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 07:12:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
library/prefabs/totp/README.md Normal file
View File

@@ -0,0 +1,141 @@
---
title: TOTP
hide_title: true
---
# TOTP
**Timebase One Time Password**s is a popular way to do 2-Factor Authentication (2FA) for users, that is, after the user signs in with username and password they need to provide a time based token to complete the login. [Google Authenticator](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US) is a commonly used app, and there are other apps that are compatible.
This prefab contains a couple of cloud functions and frontend logic functions that help you build a 2FA sign up / log in flow in Noodl.
After installing you will see two folders, one among your componets (the frontend) and one in your cloud functions called **TOTP**.
<div className="ndl-image-with-background m">
![](/library/prefabs/totp/totp-1.png)
</div>
<div className="ndl-image-with-background m">
![](/library/prefabs/totp/totp-2.png)
</div>
Let's review how we use these components to build the sign up and log in flow.
## Signing up
First the user needs to sign up normally using the [Sign Up](/nodes/data/user/sign-up) node. The **TOTP** prefabs can also be used on an existing user, that is, you can enable **TOTP** after the user has signed up or you can make it required as part of the sign up flow.
## Connecting
When you have a user signed up / logged in you can start the process of activating **TOTP**, this is a two step process. First you need to generate a secret that is attaced to your users, you then need to present the user with a QR Code that is used to add your application to the **TOTP** authentication device (e.g. Google Authenticator). Once that is successful the user can verify that it works by typing in a valid token.
The first step is simply calling the **TOTP/Start Connect** cloud function. The example below calls the function when the page is loaded on the **Did Mount** signal. When the function completes you will receive a **QR Code** that you can simply use as source for an image node to display it.
<div className="ndl-image-with-background xl">
![](/library/prefabs/totp/totp-connect-1.png)
</div>
When completed, you might have a screen like this:
<div className="ndl-image-with-background m">
![](/library/prefabs/totp/totp-connect-2.png)
</div>
You can customize what name is used when your application shows up in the authentication device / app by looking in the **TOTP/Start Connect** cloud function for the action node called **Generate Secret**, clicking that node will reveal a property called **Name** that you can edit.
<div className="ndl-image-with-background xl">
![](/library/prefabs/totp/totp-connect-3.png)
</div>
At this point the **TOTP** is not yet activated for the user. To activate the user must prove that the authentication device is working by entering a valid token. This token is sent to the cloud function **TOTP/Complete Connect**, when this function completes with **Sucess** the user can no longer log in with just username and password, more on this later. If it completes with **Failure** the token was not correct and you need to alert the user.
<div className="ndl-image-with-background xl">
![](/library/prefabs/totp/totp-connect-4.png)
</div>
When the **TOTP** connection is completed, you can have the user keep using your application as normal. But when it's time for login you need a different flow.
## Logging in
Logging in is now divided into two steps, the first will simply ask for the username / email and password like before.
<div className="ndl-image-with-background l">
![](/library/prefabs/totp/totp-login-1.png)
</div>
When the **TOTP** connect has completed you cannot use the [Log In](/nodes/data/user/log-in) node anymore, it will fail stating that log in is disabled. Instead you need to use the **TOTP / Start Log In** component that was installed in your project when cloning the prefab. You use it just like you would the good old **Log In** node, providing **Username** and **Password**.
<div className="ndl-image-with-background xl">
![](/library/prefabs/totp/totp-login-2.png)
</div>
There can be three possible output signals from this action node:
- **Success** The user is logged in, **TOTP** was not enabled, you can proceed to your application as normal.
- **Failure** The user did not provide the right username / password.
- **TOTP Needed** The username and password was correct but **TOTP** is enabled. You need to send the user to a new page where the **TOTP** can be entered and validated.
This next step simply need to ask the user to provide the **TOTP** from their authentication device.
<div className="ndl-image-with-background l">
![](/library/prefabs/totp/totp-login-3.png)
</div>
In this step we are going to use the **TOTP / Complete Log In** that was installed into the project when the prefab was cloned. The **TOTP** token along with the **Username** and **Password** from the previous step (in this example they were stored in variables) need to be provided.
<div className="ndl-image-with-background xl">
![](/library/prefabs/totp/totp-login-4.png)
</div>
If this action results in a **Success** signal the log in is completed and you can move the user on to your application. If **Failure** is sent then the token was not correct and you need to notify the user.
## Disconnecting
When the user is logged in you can disconnt the **TOTP**, this will remove the secret and the user can now log in the normal way again with just username and password.
<div className="ndl-image-with-background xl">
![](/library/prefabs/totp/totp-disconnect-1.png)
</div>
This is just a matter of calling the **TOTP / Disconnect** cloud function while the user is logged in. This will return a **Success** or **Failure** signal.