Webflow
Getting Started with Secqure Login with Webflow
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.
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
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.
<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 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>
You can test Secqure Passwordless authentication for your Webflow application.
Congratulations.....You are all set.
👍
Last modified 1yr ago