But How does it work? How can you make such a system?
<p name=”e0c6″ id=”e0c6″ class=”graf graf–p graf-after–h3″>Well now you know what exactly is a magic link, and what it can do for you. But you don’t exactly know how does it work. In the upcoming sections, I will be explaining the logic and will be writing pseudo code to make you understand the inner workings of the same.
Step 1 : Create a magic link
We will call the function createMagicLink passing the mobile number of the user and the target screen URL. Refer the pseudo code to get the hang of the logic.
The user will get a shortened URL?—?https://bit.ly/2O2WQ0c, which will expand to “https://www.mysite.com/magic_link_signup?token=abcd1234”. The reason we have shortened the URL is to save characters in SMS.
Step 2: Handle the Magic Link when user clicks on it
In this step, you need to create an API endpoint “/magic_link_signup” in your application which will handle the link when user clicks on it.
In short, this API endpoint is performing the following –
- Get the query parameter token from the URL, this is the same $randomString which is generated in Step 1.
- Use this token to generate $maskedRandomString using the function generateMaskedRandomString defined in Step 1.
- Since this $maskedRandomString was stored in the DB under the table “magic_links”, we will search this table to get the info about the user to whom this token belongs to.
- We will get the mobile number from the magic link table for the corresponding $maskedRandomString.
- Use this mobile number to get the User’s info from your user accounts table of the database.
- With this user info, set the sessions and cookies for the user. The user is now logged into the system.
- Once the user is logged in the browser with session set, redirect the user to the target screen with $targetURL obtained from magic_links table.
VOILA!!! Mind = blown?
Yes, this was somewhat my reaction when I get to know about this technique! Just one click, and user reached the targeted screen of your choice! Seems like a fairy tale, hence the name “Magic Link”.
To sum it all up, its nothing but –