SecQure
  • 📔Overview
  • 🚀Getting Started
  • Dashboard
    • Project
    • Design
    • Configure - Magic Link Page,Custom Email & SMS
    • Forms
    • Identity Validation
    • Project Setting - Domain and Session
  • Integration
    • HTML
    • Next.js
    • React
    • React Native
  • Backend response handling - SDKs
  • No Codes
    • Bubble
    • Wordpress
    • Webflow
  • APIs
  • Migration
  • Additional Contents
Powered by GitBook
On this page
  1. Integration

HTML

PreviousProject Setting - Domain and SessionNextNext.js

Last updated 3 years ago

Was this helpful?

CtrlK

Was this helpful?

Step 1: Add Secqure JS SDK

<!-- Get Secqure JS SDK -->
<script
    src="https://dev.secuuth.io/JS/prod/Secuuth.bundle.js"
    type="text/javascript"
></script>

Step 2: Add a div element

<div id="secuuthForm"></div>

Step 3: Invoke Secqure

const secuuth = new Secuuth({
      // Key Id obtained while creating Project in Dashboard
      keyId: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      // Name of the Form
      profileName: "Default",
      // Div id created in above step
      containerId: "secuuthForm",
      onSubmit: (payload) => {
      // Send payload to your backend server
      })

The above steps render your Login form

Secqure returns tokens as part of the payload. Your backend server should validate the access and Id tokens and extract information. Use SDKs to validate tokens

{
  "accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIi...",
  "idToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJi...",
  "refreshToken": "ad40e2af38f35937bc702cd8bd9c5c3d0af1aad460df..."
}

Congratulations... You are done!!!