Webflow

Getting Started with Secqure Login with Webflow

PreviousWordpress NextMigration

Last updated 3 years ago

Was this helpful?

Webflow

Getting Started with Secqure Login with Webflow

Step 1:Create an account in Secqure

1) Login to Secqure Dashboard from and click on ""

2) Once Logged-in, create a New Project from Dashboard by clicking ""

3) Select your newly created Project and copy your project Key_ID

4) Configure your authentication from "" from left navigation of selected project. Select your identfier type and authentication method.

5) Style your login form using Design>. Select style, logo, text to your login form.

6) You can customize the email link content under from selected project from the top header dropdown.

Note: If the login form does not show up after following the steps mentioned in the 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 . 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

Step 2: Setup in Webflow

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.

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

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

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

Note: Replace the keyId with your Secqure Project Key ID you have created in Step1.


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

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

Protected page

Protected page content that only logged-in users can view.

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

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

Note: Replace the keyId with your Secqure Project Key ID you have created in Step 1.

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

Step 3: Publish your Webflow site

You can test Secqure Passwordless authentication for your Webflow application.

PreviousWordpress NextMigration

Last updated 3 years ago

Was this helpful?

Step 1:Create an account in Secqure

1) Login to Secqure Dashboard from and click on ""

2) Once Logged-in, create a New Project from Dashboard by clicking ""

3) Select your newly created Project and copy your project Key_ID

4) Configure your authentication from "" from left navigation of selected project. Select your identfier type and authentication method.

5) Style your login form using Design>. Select style, logo, text to your login form.

6) You can customize the email link content under from selected project from the top header dropdown.

Example: For Webflow test URL https://mytest-site.webflow.io, add the Web URL as https://mytest-site.webflow.io

Step 2: Setup in Webflow

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

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

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

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

Note: Replace the keyId with your Secqure Project Key ID you have created in Step1.


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

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

Protected page

Protected page content that only logged-in users can view.

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

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

Note: Replace the keyId with your Secqure Project Key ID you have created in Step 1.

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