We have covered step by step guide on implementation of magic link login on nocode backend
In the first part of magic link blog, we discussed the basics of implementing a magic link login on a no-code backend. This blog is a continuation, where we dive into the next steps.
For sending emails, we’ll use Twilio’s SendGrid email service. We'll utilize their API to send emails, but you can use any email provider, as the process remains the same.
The third action is Token Generation. Start by adding a new action and selecting Token Generation as the action type.
You’ll need to configure three sections for this action:
user_id
and user_email
, which will be used for request validation.Use the Test
tab in the logic configuration to verify your setup up to this action.
Expected Test Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMDg3NTMsImV4cCI6MTczODIyMzE1M30.28Bro0HoLfC6qYSvsKOjHIvf-wPPi2raGZZOfQlpRLM"
}
}
}
Next, add a Form a Text action to create the magic link url. This contains a list of recipient text with generated token.
We added two text,
first text - A static text eg: https://app.fireapis.com/magic-link/?token=
second text- Previous action result from Token Generation
action
Use the Test
tab in the logic configuration to verify your setup up to this action.
Expected Test Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJ1c2VyX2lkIjoxLCJpYXQiOjE3MzgyMDg4ODIsImV4cCI6MTczODIyMzI4Mn0.LR16MU8FOnV5IYfHksKNYxy-YB496jpWIjjlhhBKW3w"
},
"action_4_result": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJ1c2VyX2lkIjoxLCJpYXQiOjE3MzgyMDg4ODIsImV4cCI6MTczODIyMzI4Mn0.LR16MU8FOnV5IYfHksKNYxy-YB496jpWIjjlhhBKW3w"
}
}
To send an email using SendGrid's API, you’ll need to structure the payload in the following format:
{
"personalizations": [
{
"to": [
{
"email": "[email protected]",
"name": "Alex"
}
],
"dynamic_template_data": {
"subject": "Hello, Alex",
"customer_name": "Alex",
"confirmation_number": "123abc456def789hij0"
}
}
],
"from": {
"email": "[email protected]",
"name": "Example Order Confirmation"
},
"reply_to": {
"email": "[email protected]",
"name": "Example Customer Service Team"
}
}
To create this structure, we’ll use multiple actions. Each action will help build specific parts of the payload:
to
array of object - A list of recipient email addresses and names, built using the Build Array/List Action.dynamic_template_data
object - Custom data for the email template, such as the login link, built using the Build Object Action.personalizations
array of object - A combination of to and dynamic_template_data
, built using the Build Array/List Action.from
object - Sender details like [email protected]
, built using the Build Object Action.reply_to
object Information for handling reply emails, built using the Build Object Action.Next, add a Build Array/List Action to create the to
key. This contains a list of recipient details.
List length: Set the list length to 1 for a single recipient.
List Type:
Choose array of objects and configure key-value pairs. Add keys like email
and name
and map their values from the user details using the Dynamic Data Selector.
Use the Test
tab to validate that the list contains the expected structure.
Below is the results of this action.
Expected Test Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzU2NTIsImV4cCI6MTczODI1MDA1Mn0.hwq0fLIQ9K7bWAg9c1MCITEGM0f9LQ2V5fJDystlOdo"
},
"action_4_result": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzU2NTIsImV4cCI6MTczODI1MDA1Mn0.hwq0fLIQ9K7bWAg9c1MCITEGM0f9LQ2V5fJDystlOdo",
"action_5_result": [
{
"email": "[email protected]",
"name": "vasanth"
}
]
}
}
Add a Build Object Action to create the dynamic_template_data
key. This holds custom data for the email template.
Add the following keys:
login_link
- Taken from the Form Text Action result.email
- Retrieved from the user action result.Sender_Name
, Sender_City
, Sender_State
, Sender_Zip
- Static values representing your business details.Those are the keys which is needed by our template in sendigird, where login_link
is the actual link which contains the token as per the magic link design
Use the Test
tab to validate that the list contains the expected structure.
Below is the results of this action.
Expected Test Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJ1c2VyX2lkIjoxLCJpYXQiOjE3MzgyMzgwMzcsImV4cCI6MTczODI1MjQzN30.32vLYCIpb3JC8p1DIFvgMNKBdLrkeDPhFf6qdnM59hE"
},
"action_4_result": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJ1c2VyX2lkIjoxLCJpYXQiOjE3MzgyMzgwMzcsImV4cCI6MTczODI1MjQzN30.32vLYCIpb3JC8p1DIFvgMNKBdLrkeDPhFf6qdnM59hE",
"action_5_result": [
{
"email": "[email protected]",
"name": "vasanth"
}
],
"action_6_result": {
"Sender_State": "Tamil Nadu",
"Sender_City": "Chennai",
"Sender_Name": "Fireapis",
"email": "[email protected]",
"login_link": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJ1c2VyX2lkIjoxLCJpYXQiOjE3MzgyMzgwMzcsImV4cCI6MTczODI1MjQzN30.32vLYCIpb3JC8p1DIFvgMNKBdLrkeDPhFf6qdnM59hE",
"Sender_Zip": "600064"
}
}
}
Create the personalizations
key using another Build Array/List Action.
Calculate the length dynamically based on the results of the to
action.
Choose array of objects and configure keys like to
and dynamic_template_data
, mapping them from previous action results.
Below is the screenshots.
Use the Test
tab to validate that the list contains the expected structure.
Below is the results of this action.
Expected Test Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzgzNzIsImV4cCI6MTczODI1Mjc3Mn0.7tMHw19u6pcYwYyqOALfE0Uu2nNeuz1Tdw_fW3Z0mhE"
},
"action_4_result": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzgzNzIsImV4cCI6MTczODI1Mjc3Mn0.7tMHw19u6pcYwYyqOALfE0Uu2nNeuz1Tdw_fW3Z0mhE",
"action_5_result": [
{
"email": "[email protected]",
"name": "vasanth"
}
],
"action_6_result": {
"email": "[email protected]",
"login_link": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzgzNzIsImV4cCI6MTczODI1Mjc3Mn0.7tMHw19u6pcYwYyqOALfE0Uu2nNeuz1Tdw_fW3Z0mhE",
"Sender_Zip": "600064",
"Sender_State": "Tamil Nadu",
"Sender_City": "Chennai",
"Sender_Name": "Fireapis"
},
"action_7_result": [
{
"dynamic_template_data": {
"email": "[email protected]",
"login_link": "https://app.fireapis.com/magic-link/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzgzNzIsImV4cCI6MTczODI1Mjc3Mn0.7tMHw19u6pcYwYyqOALfE0Uu2nNeuz1Tdw_fW3Z0mhE",
"Sender_Zip": "600064",
"Sender_State": "Tamil Nadu",
"Sender_City": "Chennai",
"Sender_Name": "Fireapis"
},
"to": [
{
"email": "[email protected]",
"name": "vasanth"
}
]
}
]
}
}
Add a Build Object Action to configure the from
key. This specifies the sender's email and name.
Add the following keys:
email
- A static value, e.g., [email protected]
.name
- A static value, e.g., Fireapis
.
Use the Test
tab to validate that the list contains the expected structure.
Below is the results of this action.
Expected Test Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wg"
},
"action_4_result": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wghttps://app.fireapis.com/magic-link/?token=",
"action_5_result": [
{
"email": "[email protected]",
"name": "vasanth"
}
],
"action_6_result": {
"login_link": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wghttps://app.fireapis.com/magic-link/?token=",
"email": "[email protected]",
"Sender_Name": "Fireapis",
"Sender_City": "Chennai",
"Sender_State": "Tamil Nadu",
"Sender_Zip": "600064"
},
"action_7_result": [
{
"to": [
{
"email": "[email protected]",
"name": "vasanth"
}
],
"dynamic_template_data": {
"login_link": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wghttps://app.fireapis.com/magic-link/?token=",
"email": "[email protected]",
"Sender_Name": "Fireapis",
"Sender_City": "Chennai",
"Sender_State": "Tamil Nadu",
"Sender_Zip": "600064"
}
}
],
"action_8_result": {
"email": "[email protected]",
"name": "Fireapis"
},
"action_9_result": {
"email": "[email protected]",
"name": "Fireapis"
}
}
}
Add another Build Object Action for the reply_to
key, which specifies the email address to receive replies.
email
- A static value, e.g., [email protected]
.name
- A static value, e.g., Fireapis
.
Use the Test
tab to validate that the list contains the expected structure.
Below is the results of this action.
Results
{
"data": {
"action_1_result": [
{
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
}
],
"action_2_result": {
"email": "[email protected]",
"first_name": "vasanth",
"id": 1,
"last_name": "fireapis",
"created_at": "2024-09-08T13:43:03.000Z"
},
"action_3_result": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wg"
},
"action_4_result": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wghttps://app.fireapis.com/magic-link/?token=",
"action_5_result": [
{
"email": "[email protected]",
"name": "vasanth"
}
],
"action_6_result": {
"login_link": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wghttps://app.fireapis.com/magic-link/?token=",
"email": "[email protected]",
"Sender_Name": "Fireapis",
"Sender_City": "Chennai",
"Sender_State": "Tamil Nadu",
"Sender_Zip": "600064"
},
"action_7_result": [
{
"to": [
{
"email": "[email protected]",
"name": "vasanth"
}
],
"dynamic_template_data": {
"login_link": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2VtYWlsIjoidmFzYW50aEBmaXJlYXBpcy5jb20iLCJpYXQiOjE3MzgyMzg2MjQsImV4cCI6MTczODI1MzAyNH0.BwW-anbymKQhmbkR6UCOGbO-gZaUcugVGmzY99Lu8Wghttps://app.fireapis.com/magic-link/?token=",
"email": "[email protected]",
"Sender_Name": "Fireapis",
"Sender_City": "Chennai",
"Sender_State": "Tamil Nadu",
"Sender_Zip": "600064"
}
}
],
"action_8_result": {
"email": "[email protected]",
"name": "Fireapis"
},
"action_9_result": {
"email": "[email protected]",
"name": "Fireapis"
}
}
}
Finally, configure an API Request Action to send the email using the SendGrid API.
POST
methodhttps://api.sendgrid.com/v3/mail/send
Authorization
header with your SendGrid API key.to
, dynamic_template_data
, personalizations
, from
, reply_to
, mapped from previous actions and tempalte_id
which we can get it from sendgird user interface.Below is screenshots
Use the Test
tab to validate that the list contains the expected structure.
In this testing we are making call to sendgird where you will start receiving magic link in your email.
Results
{
"data": {
"action_1_result": [],
"action_2_result": [
{
"id": 4,
"email": "[[email protected]](mailto:[email protected])",
"first_name": null,
"last_name": null,
"created_at": "2024-12-31T10:08:00.573Z",
"updated_at": "2024-12-31T10:08:00.573Z"
}
]
}
}
In this blog, we showed how to easily set up a magic link login flow using no-code. We covered generating tokens, creating email content, and sending it through SendGrid.