๐ŸŒŸ HTML โ€“ Magic Link with Email & Phone

Easily add email and phone number verification using Cotter's SDK. Send a magic link to your users via email, SMS or WhatsApp in just a few lines of code.

Cotter's Magic Link authenticates your user using a link. It allows seamless, fast, and secure way for your user to login to your Web App. Follow this simple guide to see how it works!

Step 0: Get the template code

To follow this guide, let's use our Hello World Template in CodeSandbox!

Step 1: Import Cotter as a dependency

Copy the following script to the head section of your HTML page

<!-- 1๏ธโƒฃ Get Cotter SDK -->
<script src="https://js.cotter.app/lib/cotter.js" type="text/javascript"></script>

Step 2: Setup a div element to contain cotter's form

<!-- 2๏ธโƒฃ Setup a div to contain the form -->
<div id="cotter-form-container" style="width: 300px; height: 200px;"></div>

Please note that id has to be cotter-form-container for the form to show up.

Step 3: Initialize Cotter

You need your API_KEY_ID for this step. Create a developer account and create a Project to get your API keys. The API Keys will only be shown once!

Grab your API_KEY_ID from the dashboard, then replace <YOUR_API_KEY_ID> with your API_KEY_ID.

<!-- 3๏ธโƒฃ Show the form -->
var cotter = new Cotter("<YOUR_API_KEY_ID>"); // ๐Ÿ‘ˆ Specify your API KEY ID here
.showEmailForm() // to send magic link to a phone number use .showPhoneForm()
.then(payload => {
// Read what Cotter Returns
var respDiv = document.getElementById("user-response");
respDiv.innerHTML = `
<div class="success">Verification Success</div> <br/>
<div class="title">User info from Cotter:</div>
<pre>${JSON.stringify(payload, null, 4)}</pre>
<div class="note">&#x270D Note: Notice that we use <code>SkipRedirectURL: true</code> here. This payload will be sent to your <code>RedirectURL</code> if you specify it.</div>
localStorage.setItem("user_session", JSON.stringify(payload));

๐ŸŽ‰ You're done! Now that you know how it works on the client side, let's check out how to process Cotter's payload in your backend so you can start registering and logging in users in your backend server.

Here's a fully working example of the guide we went over.