# 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](https://docs.secuuth.io/setup-configuration)" 2\) Once Logged-in, create a New Project from Dashboard by clicking "[New Project](https://docs.secuuth.io/setup-configuration/project)" 3\) Select your newly created Project and copy your project Key\_ID 4\) **Configure your authentication** from "[Design](https://docs.secuuth.io/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**](https://docs.secuuth.io/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**](https://docs.secuuth.io/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](#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](https://docs.secuuth.io/setup-configuration/project-setting-domain-and-session#web-url). You can add multiple URLs with comma-separated. Example: For Webflow test URL , add the Web URL as {% endhint %} ### 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 ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FpAsPyVta7jCmiQzqTBMu%2Fimage.png?alt=media\&token=bddce73b-882a-43f0-a71b-592893167058) In the custom code, copy the Secqure javascript SDK url and paste inside the **\** tag as shown below to display the login form. \ ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FomgnlIzzoe1fY3lyit09%2Fimage.png?alt=media\&token=d531ae71-b669-47d6-94b6-26b25b0d71a0) Copy and paste the below code in the **Before \ tag** section of custom code as shown below. **Note:** Replace the keyId with your Secqure Project Key ID you have created in Step1. ```html ``` ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2F7hLI6uBijHv1W4wJYgWx%2Fimage.png?alt=media\&token=8735ea59-97b1-4f03-93a9-a90c6a347740) 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 **\** tag as shown below . \ ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FomgnlIzzoe1fY3lyit09%2Fimage.png?alt=media\&token=d531ae71-b669-47d6-94b6-26b25b0d71a0) Copy and paste the below code in the **Before \ tag** section of custom code as shown below. **Note:** Replace the keyId with your Secqure Project Key ID you have created in Step 1. ```html ``` ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FJlFJdNO36QiY7hC6W8O9%2Fimage.png?alt=media\&token=bbb89eca-585b-4197-9cab-bc3ff446fa68) ## Step 3: Publish your Webflow site You can test Secqure Passwordless authentication for your Webflow application. :thumbsup:**Congratulations.....You are all set.** ##