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"
integrity="sha384-CnMW/GT96q1vxl3xq1fIbUrmXpDIsXVtY+/FpJW+rMSCgjlOWpbVfs5G0dg2bMN5"
crossorigin="anonymous"></script>
<script>
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"
}
}
</script>
How it works
For a detailed description of what’s going on under the hood, see here.
Configure
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.
Installation
Add the following custom code to the Inside <head> tag of your page.
<script
src="https://www.unpkg.com/@propelauth/javascript@2.0.0/dist/javascript.min.js"
integrity="sha384-CnMW/GT96q1vxl3xq1fIbUrmXpDIsXVtY+/FpJW+rMSCgjlOWpbVfs5G0dg2bMN5"
crossorigin="anonymous"
></script>
then a global PropelAuth object will be created, and you can call
createClient from it:
<script>
PropelAuth.createClient({...});
</script>
createClient
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,
});
Usage
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.
Each element that needs an interaction also has a name, for example, here is an
image with the id profile-picture.
Finally, we can use custom code to hook up all these elements:
<script>
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
client.addLoggedInChangeObserver(updatePage);
</script>
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.
Troubleshooting
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.