# Overview

Secqure's plug-n-play Passwordless Authentication is the perfect solution for implementing authentication flow in minutes using SDKs and APIs supporting multiple technologies.

You can select  an authentication method of your choice and Secqure provides you with developer SDKs to reduce development time.

### **Key Features**

* **OAuth 2.0** flow with **PKCE** security extension
* Authentication using Email **Magic link** and **OTP** over SMS/Email
*  Login Form, Email & SMS customization, and **branding**
*  Add Custom CSS for advanced style
* **Domain** restriction and **Session** duration configuration
* Integrate easily with **no-code** platforms


# Getting Started

Set up your Secqure account and integrate authentication flow in five easy steps

1. Login to Secqure [Dashboard](/setup-configuration)  from Secqure [Home Page](https://www.secqure.io)
2. Create  your [Project](/setup-configuration/project) to generate API Key
3. Choose [authentication method](/setup-configuration/design#configure-authentication) (Magic Link or OTP)
4. [Brand](/setup-configuration/design#style-your-login-form) your Login form, [Magic Link Prompt ](/setup-configuration/design#magic-link-prompt-configuration), [Email ](/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-email)and [SMS](/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-sms)
5. Integrate [Client ](/integration/htms-and-js)and Server [SDKs](/backend-response-handling-sdks)

### OAuth 2.0 Tokens from SecQure

SecQure generates the OAuth Tokens (access token, id token, and refresh token) to be used in your application or API  using SecQure's SDKs.

**Web Frontend**

[<mark style="color:purple;">HTML Quickstart</mark>](/integration/htms-and-js)

[<mark style="color:purple;">React Quickstart</mark>](/integration/react)

**Mobile**

[<mark style="color:purple;">React Native Quickstart</mark>](/integration/react-native)

**Backend SDKs**

[<mark style="color:purple;">Node js Quickstart</mark>](https://docs.secuuth.io/pages/lNzLojor4G6k3bSmhzg4#node.js)

[<mark style="color:purple;">Python Quickstart</mark>](/backend-response-handling-sdks#python)

[<mark style="color:purple;">PHP Quickstart</mark>](/backend-response-handling-sdks#php)

**No-Code**

[<mark style="color:purple;">Bubble.io Guide</mark>](/no-codes/bubble)

[<mark style="color:purple;">Webflow</mark>](/no-codes/webflow) <mark style="color:purple;">Guide</mark>

[<mark style="color:purple;">Wordpress Guide</mark>](/no-codes/wordpress)


# Dashboard

The Dashboard allows you to create projects, design forms & emails. Apply branding to your Login forms, Magic links, and Emails.

1. Visit Secqure website (<https://secqure.io>)
2. Click on the Dashboard button to get your first passwordless experience with Secqure
3. Once Logged-in you will be redirected to the SecQure's Dashboard


# Project

Create your project and generate the API key and secret

Once you logged in to Dashboard, create your first project by clicking the "New Project" button.&#x20;

![Projects](/files/DFbuLnOxytnPl9SbT6PK)

Enter your project name and domain url. If you are testing in localhost, you can add the url as  <http://localhost> or <http://localhost:5000>. You can change the url from Project Setting later if you wish.

For mobile app enter the URL as <http://localhost>

{% hint style="info" %}
Mobile App is validated against the API Key and secret from the source. For web applications, the url is one of the key factors to validate the origin along with Key Id and secret.
{% endhint %}

![Create Project](/files/SgNwYRgimJlrmBPWRHF2)

Make a note of your API Key ID and Secret Key

![Key ID and Secret](/files/SXrLrnsS5T1Lp0tDP8LW)

**Select or Change Project**

Make sure you are on the right project when you are changing any configuration. Select your project from the "Your Projects" dropdown from the header. You can also click on the "Project" from the left navigation to go back to your Project list.&#x20;

![Select Project](/files/y0zG65kPZi4hT6vrcUS3)


# Design

Customize Your Users' Experience

### Configure Authentication

Select Identifier (Email, Phone or Both) and Authentication method.

Magic Link is supported over Email and OTP is supported over Phone/Email.

Select the preferred country code, that your users will see in the login form for SMS OTP. If your users are present in multiple countries, they will be able to select their country while login via SMS OTP over the phone. We support global SMS.&#x20;

You can also add **Terms of Service** and **Privacy Policy** URLs if you want to show those in your login form.

![Configure Authentication](/files/SiTTlOBQwsXZ3SEAY2Et)

### Style Your Login Form

Add your logo url, text, and colors for Login Form.&#x20;

For a more advanced style, you can add custom css properties for the elements. This is an optional field, edit if you are well versed with css.

![Style Your Login Form](/files/ziyJOmtdSKf4bc6kXsEo)

### Magic Link Prompt Configuration

Magic Link prompt is the waiting message page when the Email magic link is sent to the user. You can customize the message and Logo as per your need. If you do not update anything Secqure's default message will be displayed.

{% hint style="info" %}
Magic Link Prompt Configuration is applicable only in the case of Email Magic Link. For OTP over the phone or email, this option is not applicable.
{% endhint %}

![Magic Link Prompt](/files/UcyovLKx9B9itlHHiVwM)


# Configure - Magic Link Page,Custom Email & SMS

Customize Email, SMS and Magic Link Page

### Magic Link Page

Magic Link Page is displayed once the users click on their received email link to verify the login. Select your project and customize the text, color as per your brand.

![Magic Link Page](/files/ItQhG7xZsRsBji7KxJ7G)

### Custom Email

Select your project and add custom text, logo url and colors for the email your users will receive,  as part of the login verification.&#x20;

![Custom Email](/files/wsXVRIPRD6jaowLn1Tqp)

### Custom SMS

Select your project and add custom text for the sms your users will receive in the SMS OTP for login.&#x20;

![](/files/5GIzTQxEDSzeeP5njkxM)


# Forms

All about Forms

#### Default Form

Once you create a project a "Default" form is added to your project. You can customize the login form and authentication from  [Design](/setup-configuration/design)

You can create multiple forms for a single project from the "Create Form" button.

![Create Form](/files/eiWLGbIlDodvZ6lYJ0Mg)

**Select Your Form**

![Select Form](/files/oTINWCZT4v4AVCoJFhqF)

**Edit Form**

Type form name to Edit. You can rename or delete a form.&#x20;

**Note:** The Default form is noneditable.

![](/files/l0cSw15i4fUsblbPuM4f)


# Identity Validation

You can restrict the users who can login to your application

You can allow users from a selected domain or you can configure your API to allow only valid users.&#x20;

Once the API returns  userExists":"true" for the requested  id, e.g. for email "id":"<james@gmail.com>" or for phone  "id":"9196576XXXX". If the user exists he will be allowed to Login to your application.&#x20;

![](/files/hQmtpo42Tlv6up4bQeWC)

```
[{"emailID":"james@gmail.com","userExists":"true","additionalInfo":{"group":"core","role":"admin"},"id":"james@gmail.com"},
```


# Project Setting - Domain and Session

Configure Your Project Setting

#### Session Duration

You can configure the duration in days for the users to receive the magic link  or OTP again for authentication. The default is 30 days.

#### Web URL

Configure the domain URL of your application. Login form will work only from the configured URLs. For development use <http://localhost>.

{% hint style="info" %}
**Note:** If the login form does not show up after following the steps  or you received an error message "something went wrong", the likely issue cause may be incorrect URL configuration. You can add your test or live url correctly from Project Setting>Web URL. You can add multiple URLs with comma seperated.

e.g. <https://testauth.dev.io,http://localhost:3000>
{% endhint %}

![Project Setting](/files/nlinKPEE7EJMjZ1ykRpq)


# HTML

**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

<img src="/files/fiJbrrx43YNsJzPlJkr1" alt="" data-size="original">

Secqure returns tokens as part of the payload. Your backend server should validate the access and Id tokens and extract information. Use [SDKs](/backend-response-handling-sdks) to validate tokens

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

**Congratulations... You are done!!!**


# Next.js


# React


# React Native

**Requirements**

```
npm i react-native-webview expo-secure-store
```

**Step 1: Add Secqure SDK**

{% tabs %}
{% tab title="npm" %}
npm i secqure-react-native-sdk
{% endtab %}
{% endtabs %}

**Step 2: Import Secqure SDK in your project**

```
import {Secqure_Webview} from "secqure-react-native-sdk"
```

Step 3: Configure Navigation

```
<NavigationContainer>
        <Stack.Screen name="Secqure_Webview" component={Secqure_Webview} />
</NavigationContainer>
```

Step 4: Route invocation and Callback

```
navigation.navigate("Secqure_Webview", {
                apiKey: "XXXXXXXXXXXXXXXX",
                secretKey: "XXXXXXXXXXXX",
                callback: (payload) => {},
                });
```

Above steps render a login form like below

![](/files/ADXathFc09H6tQ3qaUfN)

Secqure returns User details and tokens upon first authentication and only tokens in subsequent authentications. You can use User identity information as required. Your backend server should validate the access & Id tokens and extract information. Use SDKs to validate tokens

```
{
	"tokens": {
		"accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiO...",
		"idToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIz...",
		"refreshToken": "f76d722afc0ec69e5aa11838a03569a524f3a2448932"
	},
	"user": {
		"pubKey": "i50MtIDpmQaFqozPYR6u3diOft0X6X75",
		"userId": "XXXXXX",
		"systemId": "3526b57c-f017-4659-bbb4-b1442046e46e",
		"createTime": "2022-01-17T07:21:34.356Z",
		"updateTime": "2022-01-17T07:21:49.000Z",
		"deviceType": "Win32",
		"deviceName": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36"
	}
}
```

```
{
"accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiO...",
"idToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIz...",
"refreshToken": "f76d722afc0ec69e5aa11838a03569a524f3a2448932"
}
```

**Congratulations... You are done!!!**


# Backend response handling - SDKs

Secuuth provides the below response payload after successful authentication. Your frontend is responsible to send this payload to backend.

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

Typical backend flow is below

1. Validate Access and Id tokens in the middleware
   * Redirect to login flow if tokens are invalid
   * Continue the flow if tokens are valid
2. Decode Access token to extract user information and check if exists in database
   * Create user if does not exist
   * Continue the flow if user exists
3. Set session token in the cookie, Secuuth's access token can be used as session token

## Example

### Node.js

Install SecQure Node Package

<mark style="color:purple;">`npm i secuuth-jwt-js-sdk`</mark>

### Python

<mark style="color:purple;">`pip install secuuthTokenPythonSdk`</mark>

### PHP

Install the SecQure latest package using composer&#x20;

<mark style="color:purple;">`composer require secqure/validatetoken v1.0.2`</mark>

Or integrate the SecQure PHP Library directly from [github](https://github.com/secqure/secqure-php-sdk)

{% tabs %}
{% tab title="Node.js" %}

```
const express = require("express");
const app = express();
var cors = require("cors");
var bodyParser = require("body-parser");
Var secuuthJWT = require("secuuth-jwt-js-sdk");

app.use(cors());
app.use(bodyParser.json());

app.post("/signin", async (req, res) => {
  // Validate access token
  const accessToken = req.body.accessToken;
  var validity = false;
  try {
    validity = await secuuthJWT.SecuuthValidateJWT(accessToken);
  } catch (e) {
    validity = false;
  }
  if (!validity) {
    res.status(401).end("Invalid access token");
    return;
  }

  // Decode access token
  let decoded = new secuuthJWT.SecuuthAccessToken(accessToken);
  // Add logic to Register user and set session tokenJ  
    res.status(200).json(decoded.payload).end();
});

app.listen(port, () =>
  console.log('Example app listening at http://localhost:3000')
);
```

{% endtab %}

{% tab title="Python" %}

```
import json
from flask.app import Flask
from flask import request
from pySdk.idToken import idToken
from pySdk.accessToken import accessToken
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

@app.route('/',methods=['POST'])
def App():
    
    token = request.data
    objs=json.loads(token)
    x=objs['accessToken']
    print(accessToken(x).getUserId());
    print(accessToken(x).decodePayload())
    return accessToken(x).decodePayload();
```

{% endtab %}

{% tab title="PHP" %}

```
<?php 
    require_once("../vendor/autoload.php"); 
    //retrieve the access_token from cookie or body
    
    $token = 'eyJhbGciOiJSUzI1NiIsInR5c.......'
    $myAuth = new ValidateToken();
    $myToken = $myAuth->decodeToken($token);
    
    // add your custom logic 
    //get the user's login Id
    
    echo $myToken->userId; 
?>
```

{% endtab %}
{% endtabs %}


# Bubble

Add Secqure Plugin to your Bubble.io App

### Login to Secqure

#### Create KEY\_ID for your Login Form

1\) Login to Secqure Dashboard from <https://www.secqure.io> and click on "[Dashboard](/setup-configuration)"

2\) Once Logged-in Create a [New Project ](/setup-configuration/project)from Dashboard by clicking "New Project"

3\) Select your newly created Project and copy your project Key\_ID

4\) add style, logo, text to your login form under Project >[Design](/setup-configuration/design#style-your-login-form)

5\) You can customize the email link content under [Custom Email](/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-email)

6\) Add this Key\_ID in your installed Secqure Plugin  in your Bubble.io App&#x20;

{% hint style="info" %}
**Note:** If the login form does not show up after following the steps mentioned in the [Bubble Setup](#bubble-setup) or you received an error message "something went wrong", the likely cause may be incorrect URL configuration. You can add your test or live url correctly from [Project Setting>Web URL](/setup-configuration/project-setting-domain-and-session#web-url). You can add multiple URLs with comma-separated.

Example: For bubble test URL <https://myauthtest.bubbleapps.io/version-test> , add the Web URL as <https://myauthtest.bubbleapps.io>
{% endhint %}

### Bubble Setup <a href="#bubble-setup" id="bubble-setup"></a>

The below section provides  step by step guide to integrate the Secqure Login form to  home page (Index) and a members-only page (Protected).

#### Install Plugin

Go to the Plugins tab of your Bubble application design view. Click on Add Plugins  and search for "**Secqure**" or "**Secqure Passwordless Login"** as displayed in the below screen and install.

![Install Secqure Passwordless Login Plugin](/files/zAwhQv6ZUlOqbvnJVWuq)

#### Add API Key\_ID

From the Plugins tab, click Secqure Passwordless Login, and enter your Secqure Project Key\_ID as mentioned in [#login-to-secqure](#login-to-secqure "mention").

Keep the Key\_ID-dev field blank.

It's suggested using the latest version of the plugin to keep up-to-date on all Secqure's new features.

![](/files/nS4kGWIiPvswRtfPm6xK)

#### Secqure Login Form

Once  the plugin is installed successfully, you can find the "**Secqure Login Form**" under the **Input form** in the Design Tab

![](/files/tRJJert5A2MVYi7DLEZ2)

#### Index Page

Drag and add the Secqure Login Form to your index page. A login form would be visible as shown  below.

![](/files/6agSDVSSJYGcxfL3GkTw)

#### Protected Page <a href="#protected-page" id="protected-page"></a>

Create a new page called  **Protected** .

Select **Add a new page** by clicking on the top left corner above the **Design** tab as displayed in the below screen.

![](/files/kVXULJ61VdS4ezLtrLNa)

* Add a "**Secqure Protection**" component to make this page protected. Find and Drag it from the left panel under the **Visual Elements**. &#x20;

![](/files/dY3jt0wZ8u7q0iMNKxIj)

**Welcome Logged-in user**

Add a text element and select it's value as SequreProtection A's identifier. which will show the logged-in user's email or phone number.

![](/files/3lmgRPhD8OkTOwMpOAbd)

**Show Protected Content**

Add a group from **Containers** and change the name "Group A" to **Group Logged-in** by clicking on the top part of the grey box as shown in the screen below.

![](/files/Q7LG6iGIVP4E1Y0BOKqT)

Add all your protected content in that group, including text, buttons, images, and containers. Make sure to <mark style="background-color:yellow;">uncheck "This element is visible on page Load"</mark>. The workflow logic will be added later to make sure it is visible on successful login. In this example we have added text element as "You are Logged In : Members Only View".

![](/files/AEZUJSYP5uwnJZ4EGGMa)

**Show not Logged-in Content**

Create another Group and name it **Group Not Logged-In** , just like previous one.

This group will be visible if you do not successfully log in. Add a text message saying "You are Not Logged In:Guest View" . Make sure to <mark style="background-color:yellow;">uncheck "This element is visible on page Load"</mark>.&#x20;

![](/files/gYyKphe0tNpeRlnp4Zta)

#### Login Workflow <a href="#login-logic" id="login-logic"></a>

Let's add the worflow steps for index page and protected page.

**Index Page**

Once user logged-in from index page we want to re-direct them to the protected page.

Navigate to index page, go to workflow tab and add an event.

Add a new element: **Elements >&#x20;**<mark style="background-color:blue;">**A Secqure Login form - User Pressed Login**</mark>

![](/files/V8WTuRgR8cymxLoa7eYB)

&#x20;click to <mark style="background-color:blue;">**add an action**</mark> to Navigate to the Protected page

![](/files/RugA6PJw7ct86iu7eTAx)

* Select **Navigation > Go To Page** action to select **Protected** page as the destination.

![](/files/Gkz5u77vewchJHEAnUDn)&#x20;

**Protected Page**

Let's create a workflow to show the **Protected** content if the user successfully logged-in , else, show the **Not Logged In** content.&#x20;

* Navigate back to the protected page by clicking on the top left, and click workflow.
* Add an **Event** > **Elements** > **A SecqureProtection  is\_loaded**. This enables us to take action whenever the Protected page is loaded.
* Add an **Action** > **Plugins** > **Check User Logged-in**

![](/files/16VCFYf45dSiHFePKGF6)

* Set "*access\_token"* as **ThisSecqureProtection's access\_token**, "*identifier"* as **ThisSecqureProtection's identifier**

![](/files/5cPKIJXxT4hcCIYuzUXS)

### <mark style="color:purple;">Well done</mark> :thumbsup:, <mark style="color:purple;">You are almost there</mark> :clap:

Let's create the logic to show the protected content when the user successfully logged-in.

* Add another **Action** > **Element Actions** > **Show.**
* Then set the element as our Group Protected Content, and set **Only when: Result of Step 1 (Check User Logged-in)‘s logged\_in is yes.**

![Check User Logged-in is 'yes'](/files/oIg8jW7kDNnAZRbVnnDS)

To create the logic when the user fails to log in,

* Add another **Action** > **Element Actions** > **Show.**
* Then set the element as our Group Not Logged In, and set **Only when: Result of Step 1 (Check User Logged-in) logged\_in is no.**

![Check User Logged-in is 'no'](/files/QiunYGtqj40VR41w03jj)

#### Logout Button <a href="#logout-button" id="logout-button"></a>

Let’s create a logout button to log the user out of the website and redirect to index page.

* On the protected page, switch back to Design and  drag a button under the Visual element  and place on the top left corner of the page. Edit the button text as "**Logout**"**.**
* Make sure you <mark style="background-color:yellow;">uncheck "This element is visible on page load</mark>". We want to show this button only if the user logs in.&#x20;
* Add another action by clicking on the **Action** > **Element Actions** > **Show.** just like the previous one.
* Set the **Button Logout** as the element, and show **Only when: Result of Step 1 (Check User Logged-in) logged\_in is yes.**

This logic will display the button only when the user logged in.

![Show Logout Button Condition](/files/LHhvkRJillbum2AOkLmC)

### **Logout User**

Finally, let’s create the workflow of the Logout button.

* Go to **Workflow** and add another event **Event** > **Element** > **An element is clicked** beside the previously created event **A Secqure Protection is loaded** as shown  below.

![Add an event for Logout Button Click](/files/BHdk6oDFpfghrDDZMnLB)

* Select **Logout Button** as the element.
* &#x20;Add an action > Plugins > logout Then, we need to redirect them back to the home page.&#x20;
* Add an **Action** > **Navigation** > **Go to a page** under the same event and select the index page.

![](/files/CuME3QGJPd5jqd1xjqRT)

This will redirect you to the index page and log you out.

### Login button

We need to show this button only if the user is not logged-in.&#x20;

* Add a Login Button and uncheck “This element is visible on page load”
* Continuing with the workflow above, add an action > Element Actions > Show.&#x20;
* Set the Button Log In as the element, and show “**Step 1 (Check User Logged-in) logged\_in is no"**&#x20;

Let's navigate to the Home page when Login is clicked&#x20;

* Go to Workflow and add another event > Element > an element is clicked.&#x20;
* Select the Login Button as the element.&#x20;
* We need to redirect the user back to the home page. So, let's add an action > Navigation > Go to page, set  "index" as the destination page.

:thumbsup:<mark style="color:blue;">**Congratulations.....You are all set.**</mark>


# Wordpress

Integrate Secqure Passwordless Login with WordPress

1. Create Your [Project](/setup-configuration/project) in the Secqure [Dashboard](/setup-configuration) and obtain your Key Id
2. [Design](/no-codes/webflow) Your Login Form and configure [Custom Email ](/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-email)and [SMS](/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-sms)
3. Add Key ID in your WordPress Admin [Plugin](https://wordpress.org/plugins/secqure-login/) Config

Check-out the Secqure Passwordless Login [WordPress Plug-in Page](https://wordpress.org/plugins/secqure-login/)

{% hint style="info" %}
**Note:** If the login form does not show up after following the steps mentioned above,  or you received an error message "something went wrong", the likely cause may be incorrect URL configuration. You can add your test or live URL correctly from [Project Setting>Web URL](/setup-configuration/project-setting-domain-and-session#web-url). You can add multiple URLs with comma-separated.

{% endhint %}


# Webflow

Getting Started with Secqure Login with Webflow

### Step 1:Create an account in Secqure

1\) Login to Secqure Dashboard from [https://www.secqure.io ](https://www.secqure.io)and click on "[Dashboard](/setup-configuration)"

2\) Once Logged-in,  create a New Project from Dashboard by clicking "[New Project](/setup-configuration/project)"

3\) Select your newly created Project and copy your project Key\_ID

4\) **Configure your authentication** from "[Design](/setup-configuration/design)" from left navigation of selected project. Select your identfier type and authentication method.

5\) Style your login form using **Design>**[**Form Styling**](/setup-configuration/design#style-your-login-form). Select style, logo, text to your login form.

6\) You can customize the email link content under [**Custom Email**](/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-email) from selected project from the top header dropdown.

{% hint style="info" %}
**Note:** If the login form does not show up after following the steps mentioned in the [Webflow Setup](/no-codes/webflow#step-2-webflow-setup) below or you received an error message "something went wrong", the likely cause may be incorrect URL configuration. You can add your test or live url correctly from [Project Setting>Web URL](/setup-configuration/project-setting-domain-and-session#web-url). You can add multiple URLs with comma-separated.

Example: For Webflow test URL <https://mytest-site.webflow.io>, add the Web URL as <https://mytest-site.webflow.io>
{% endhint %}

### Step 2: Setup in Webflow <a href="#step-2-webflow-setup" id="step-2-webflow-setup"></a>

**Note**: If you are on any Webflow paid plan, you can setup the custom code.

In this example, let's create two pages in Webflow: Login Page (/) and Protected Page (/protected).  You can add login in any page of your choice. And the protected page is the restricted page where you want to redirect the user once they logged-in.

You will see the embedded Secqure login form on the login page in which users can enter their email address or phone number, and the protected page contains the restricted content which  a logged-in user to see.

### Login page

On the login page, add a section element (Div block) with ID **SecqureLogin.** This section will be used to load the Secqure login form.

For better result you can make this element 350x350 for width and height

![](/files/Fb9DgNhUMohBXnMc5XzM)

&#x20;In the custom code, copy the Secqure javascript SDK url  and paste inside the **\<head>** tag as  shown below to display the login form.

<mark style="background-color:purple;">\<script src="[https://dev.secuuth.io/JS/prod/Secuuth.bundle.js">\\](https://dev.secuuth.io/JS/prod/Secuuth.bundle.js">\\)</script></mark>

![](/files/qbsBrf2EokdT0tGsT1lB)

Copy and paste the below code in the **Before \</body> tag** section of custom code as shown below.

**Note:** <mark style="background-color:purple;">Replace the keyId with your Secqure Project Key ID</mark> you have created in Step1.

```html

<script>    
    const secuuth = new Secuuth({
      keyId: "84a86dc9-b852-4585-xxxx-xxxxxxxx",
      profileName: "Default",
      containerId: "SecqureLogin",
      onSubmit: (payload) => {            
        localStorage.setItem('accessToken', payload.tokens.accessToken);
        window.location.href = '/protected';
      },
    });
  </script>
```

![](/files/QZf2Y6nROqaKTgmy9vtK)

Once the user logged-in, it will redirect the user to the **protected** page.

### Protected page <a href="#protected-page" id="protected-page"></a>

Protected page content that only logged-in users can view.&#x20;

In the custom code, copy the Secqure javascript SDK url  and paste inside the **\<head>** tag as  shown below .

<mark style="background-color:purple;">\<script src="[https://dev.secuuth.io/JS/prod/Secuuth.bundle.js">\\](https://dev.secuuth.io/JS/prod/Secuuth.bundle.js">\\)</script></mark>

![](/files/qbsBrf2EokdT0tGsT1lB)

Copy and paste the below code in the **Before \</body> tag** section of custom code as shown below.

**Note:** <mark style="background-color:purple;">Replace the keyId with your Secqure Project Key ID</mark> you have created in Step 1.

```html
<script>
	var accessToken = localStorage.getItem('accessToken');
  console.log("AccessToken: " + accessToken);
  const result = isTokenValid("84a86dc9-b852-4585-xxxx-xxxxxxxx", accessToken)
  console.log("Result: " + result);
  
  if (!result) {
  	window.location.href = "/"
  }
  
async function isTokenValid(keyId, token) {
      const res = await Secuuth.isTokenValid(keyId, token);
      console.log("Result: " + res);
    }
</script>
```

![](/files/gtXLfpj8GIb3kBbgrVtD)

## Step 3: Publish your Webflow site <a href="#step-3-publish-the-site" id="step-3-publish-the-site"></a>

You can test Secqure Passwordless authentication for your Webflow application.

:thumbsup:<mark style="color:blue;">**Congratulations.....You are all set.**</mark>

##


# Migration


# Additional Contents