Cotter
  • 🚀Getting Started
  • Features & Concepts
    • 💬Sign In with Email/Phone Number
    • 🔐Sign In with Device
      • How it works
    • 🧬Sign In with WebAuthn
  • 📌Quickstart Guides
    • All Guides & Tutorials
    • HTML – Sign in with Email/Phone
    • React – Sign in with Email/Phone
    • React – WebAuthn
    • ▲ Next.js
    • Angular
    • Webflow
    • Bubble.io
    • Python SDK for a CLI
    • React Native – Sign in with Device
    • iOS – Sign in with Device
    • Flutter – Sign in with Device
  • 📘SDK Reference
    • Web
      • Sign In with Email/Phone Number
        • Customize the Form
        • Checking the email or phone before sending a verification code
        • Sending Code or Link via WhatsApp
        • Styling
        • Older SDK
          • Customize the Form
      • Sign in with Social Login
        • Getting Access Tokens from Social Login Providers
        • Github Instructions
        • Google Instructions
      • Sign In with WebAuthn
        • Register WebAuthn for a logged-in user
      • Sign In with Device
        • Steps for Pop Up Authentication Prompt
        • Advanced Customization for Login Form
        • Advanced Customization for Pop Up Authentication Prompt
      • Getting Access Token and Logged-In User Info
      • Sending Successful Form Submission
      • FAQ & Troubleshooting
    • React Native
      • Installation
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
        • Add a new Trusted Device
        • Remove Trusted Device
      • Sign In with Email/Phone Number
      • Getting Stored OAuth Tokens and User Information
      • FAQ
      • Older SDK Versions
        • Sign in with Email/Phone
        • Sending Code via WhatsApp
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
          • Add a new Trusted Device
          • Customization
    • Flutter
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
      • Sign in with Email/Phone Number
      • Getting the Logged-in User
      • Getting OAuth Tokens
      • Signing a User Out
    • iOS
      • Sign In with Email/Phone Number
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Push Notification
        • Check if Trusted Device is Enrolled
        • Add a New Trusted Device
        • Remove Trusted Device
      • Older Versions
        • Biometric/Pin
    • Android
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Check if Trusted Device is Enrolled
        • Add a new Trusted Device
        • Remove Trusted Device
        • Customization
      • Sign In with Email/Phone Number
      • Biometric/Pin
        • Advanced Methods
        • Customization
        • Setting Strings
        • Styling
      • Older SDK Version
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
    • Python (for CLI)
    • API for Other Mobile Apps or CLI
      • Verify Email/Phone Number
        • Handling URL Scheme
    • Backend: Handling Response
  • 🛡️ Protecting Your Account
    • Only Allow Your Website/App to Use Your API Key
    • Rate Limit
    • Enable reCAPTCHA to Protect Against Automated Abuse
  • 🗝️ Getting Access Token
    • Cotter's OAuth 2.0 Tokens Specification
    • Getting the Tokens
      • Get Tokens during Authentication
      • Using the Refresh Token
    • Storing and Removing Tokens
    • Renewing Expired Tokens
    • Verifying JWT Tokens
    • Requesting Custom Fields on your JWT Token
    • Older API
      • Using HTTP Requests
      • Getting the Tokens
        • During Authentication
          • During Email/Phone Verification
        • During enrolling Trusted Devices
  • 🔌API Reference
    • User API
      • User Object
    • OAuth Tokens API
      • Verify JWT Token using API (serverless)
      • Requesting Custom Claims on your Access Token
      • Older API
    • OAuth Tokens from Social Login
    • Event Object
    • Reset PIN API
  • Older API
    • Validating Cotter's Identity Token
    • Validating Cotter's Event Response
Powered by GitBook
On this page
  • Step 0: Get the template code
  • Step 1: Import Cotter as a dependency
  • Step 2: Setup a div with id cotter-form-container element to contain cotter's form
  • Step 3: Initialize Cotter
  • 👉 What's Next?
  • Customize the Form
  • Add Additional Fields
  • Register User to your Backend
  1. Quickstart Guides

HTML – Sign in 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.

PreviousAll Guides & TutorialsNextReact – Sign in with Email/Phone

Last updated 4 years ago

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

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://unpkg.com/cotter@0.3.32/dist/cotter.min.js"
    type="text/javascript"
></script>

Step 2: Setup a div with id cotter-form-container element to contain cotter's form

<!-- 2️⃣ Setup a div to contain the form -->
<div id="cotter-form-container" style="width: 300px; height: 300px;"></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 -->
<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here

  cotter
    .withFormID("form_default") // Use customization for form "form_default"
    .signInWithLink() // use .signInWithOTP() to send an OTP
    .showEmailForm()  // use .showPhoneForm() to send magic link to a phone number 
    .then(payload => {
    // Read what Cotter Returns
    var respDiv = document.getElementById("user-response");
    respDiv.innerHTML = `<pre>${JSON.stringify(payload, null, 4)}</pre>`;
  });
</script>

🎉 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.

👉 What's Next?

Customize the Form

Add Additional Fields

Register User to your Backend

When the user successfully authenticated, send Cotter's response to your backend to either create a new user or log the user in. Learn how to send Cotter's response and verify it in your backend:

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

Here's a of the guide we went over.

To send code/link via SMS or WhatsApp, you'll need to add some balance to you project in the .

You can customize the form from the > Branding. You can also .

like Name, Address, etc to the login form.

📌
Hello World Template
fully working example
Dashboard
Backend: Handling Response
Dashboard
add Custom CSS
Add Additional Fields