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 and click on "Dashboard"

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

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

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

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

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

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

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

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

<script src="https://dev.secuuth.io/JS/prod/Secuuth.bundle.js"></script>

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 .

<script src="https://dev.secuuth.io/JS/prod/Secuuth.bundle.js"></script>

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.

PreviousWordpressNextMigration

Last updated