Webflow - Integrate your frontend

Whether you are starting with Webflow and plan to move to another framework (e.g. React/Next.js) or if you are building something like documentation in Webflow and want to include dynamic authenticated content, PropelAuth can help.

Minimal example

The following example will display a different message for logged-in users vs logged out. We’ll go into more detail about how it works and show more advanced examples down below.

<script src="https://www.unpkg.com/@propelauth/javascript@2.0.0/dist/javascript.min.js"
    const client = PropelAuth.createClient({
        // Your auth URL can be found in your PropelAuth dashboard. 
        authUrl: "YOUR_AUTH_URL", 
        // PropelAuth uses short-lived tokens for security reasons. 
        // Enabling this feature will automatically refresh those tokens in the background. See technical details for more info.
        enableBackgroundTokenRefresh: true, 

    client.getAuthenticationInfoOrNull().then(authInfo => {
        const element = document.getElementById("text")
        if (authInfo) {
            // User contains other metadata like userId
            element.innerText = "You are logged in as " + authInfo.user.email 
        } else {
            element.innerText = "You are not logged in"

How it works

For a detailed description of what’s going on under the hood, see here.


Go to your PropelAuth project and click Frontend Integration in the sidebar. You will see:

  • Auth URL - This is where your authentication pages are hosted, and you will need this for the setup step.
  • Test Environment - This is where you test. In our case, we’ll select Webflow and enter our subdomain.
  • Login Redirect Path - After a user logs in, they will be redirected here.
  • Logout Redirect Path - After a user logs out, they will be redirected here.


Add the following custom code to the Inside <head> tag of your page.


then a global PropelAuth object will be created, and you can call createClient from it:



createClient creates an authentication client which manages your access token, fetches user information, and provides other useful authentication functions.

The client also refreshes auth information when a user switches focus to your tab or reconnects (if they were offline).

const client = createClient({
  // The base URL where your authentication pages are hosted. You can find this under the Frontend Integration section for your project.
  authUrl: "REPLACE_ME", 
  // If true, periodically refresh the access token in the background. This helps ensure you always have a valid token ready to go. Default true.
  enableBackgroundTokenRefresh: true, 


getAuthenticationInfoOrNull will return user metadata and the current user’s organizations.

You can see a full list of methods on the client in our reference. Here’s an example which creates signup/login/logout buttons that change based on whether the user is logged in or not.

We start with two different divs - one with id display-when-logged-in and one with id display-when-logged-out.

display when logged in display when logged in

display when logged in display when logged out

Each element that needs an interaction also has a name, for example, here is an image with the id profile-picture.

profile picture id

Finally, we can use custom code to hook up all these elements:

    const client = PropelAuth.createClient({
        authUrl: "https://auth.yourdomain.com", // Change me
        enableBackgroundTokenRefresh: true,

    // Set up each element to go to a PropelAuth hosted page or logout
    document.getElementById("signup").onclick = client.redirectToSignupPage;
    document.getElementById("login").onclick = client.redirectToLoginPage;
    document.getElementById("profile-picture").onclick = client.redirectToAccountPage;
    document.getElementById("logout").onclick = client.logout;

    // Update the page based on the auth information we fetch from PropelAuth
    function updatePage() {
        client.getAuthenticationInfoOrNull().then(authInfo => {
            if (authInfo) {
                document.getElementById("profile-picture").src = authInfo.user.pictureUrl;
                document.getElementById("display-when-logged-in").style.display = "revert";
                document.getElementById("display-when-logged-out").style.display = "none";
            } else {
                document.getElementById("display-when-logged-in").style.display = "none";
                document.getElementById("display-when-logged-out").style.display = "revert";

    // Whenever our user logs in or out, update the page

Here’s what an example application looks like. Note that all we did was create the 2 divs, 3 buttons, and 1 image. The rest is our hosted pages.

webflow demo app


If you have any issues seeing the logged-in user, check the FAQ.

Making an authenticated HTTP request

There are a lot of ways to make HTTP requests in Javascript. You could use the Fetch API, XMLHttpRequest, or a library like axios.

Whichever you choose, to make an authenticated request on behalf of your user, you’ll need to provide an access token. Access tokens are available from getAuthenticationInfoOrNull. You provide it in the request in the Authorization header, like so:

Authorization: Bearer YOUR_ACCESS_TOKEN

With the Fetch API, this looks like:

function whoAmI(accessToken) {
  return fetch("/whoami", {
    method: "GET",
    headers: {
      Authorization: `Bearer ${accessToken}`,

Next Steps

Done with your frontend? Next you can integrate your backend.