Web Frontend Developer (e.g. Webflow with custom auth integration)

​

Goal:

​

Build and maintain a Webflow-based marketing / customer-facing site that supports user login and secured, backend-connected areas (dashboard-like content), using custom code embeds and API calls to your backend.

​

1. Objectives

​

Create a high-quality, responsive website in Webflow that matches brand and product messaging.

​

Implement a login / signup / forgot password flow on top of Webflow using custom code.

​

After login, fetch user-specific data from your backend (e.g. plans, accounts, cashflow) and render it in Webflow pages or in embedded components.

​

Ensure secure token handling (JWT/Access+Refresh) in the browser.

​

Make the setup maintainable so that non-technical team members can still edit pages in Webflow.

​

1. Responsibilities

​

Build pages, layouts, components, CMS collections in Webflow (homepage, pricing, contact, blog, FAQ, product explainer).

​

Add custom code (HTML/JS) to:

​

render login/sign-up forms (or override Webflow forms),

​

call backend auth endpoints,

​

store tokens (preferably in httpOnly cookies if backend supports it, otherwise secure localStorage with refresh flow).

​

Create a protected page pattern in Webflow:

​

On page load, check auth state.

​

If not authenticated → redirect to login.

​

If authenticated → load user data from backend and inject into the page.

​

Integrate with GraphQL or REST endpoints exposed by your backend (the spec we did earlier).

​

Implement error and state handling (loading spinners, error messages, form validation).

​

Work with backend dev to agree on:

​

CORS,

​

allowed origins (Webflow domain + custom domain),

​

token format,

​

endpoints for user/profile data.

​

Document the integration so future Webflow edits don’t break the auth.

​

1. Required Skills

​

A. Webflow

​

Expert at Webflow Designer (symbols, CMS collections, interactions, responsive breakpoints).

​

Experience exporting Webflow sites or adding custom code in the project settings / page settings / embeds.

​

Knowledge of Webflow form handling and how to override it with custom JS.

​

B. Frontend (Browser) Tech

​

Solid HTML/CSS/JS (vanilla) to extend Webflow.

​

Comfortable writing small SPA-like modules inside Webflow pages (e.g. via script + a root div).

​

Experience with fetch / Axios to call APIs.

​

Basic state management in vanilla JS (auth state, user object).

​

Comfortable handling CORS constraints and preflight requests.

​

C. Authentication Integration

​

Understanding of JWT-based auth (access token + refresh token) OR session-based auth.

​

Ability to implement:

​

POST /auth/login → on success, store token

​

GET /me → to get user profile

​

auto-redirect if token invalid/expired

​

Knowledge of safe storage options and their trade-offs (localStorage vs cookies).

​

Ability to add route guards (JS checks on page load in Webflow).

​

D. Backend Connectivity

​

Can consume REST or GraphQL endpoints from the browser.

​

Can map backend data → Webflow elements (e.g. fill a div with user’s name, list of accounts, balances).

​

Knows how to handle 401/403 and re-authenticate or redirect.

​

1. Technical Requirements (How it should work)

​

Login Page (Webflow)

​

Webflow form → onsubmit JS handler

​

JS sends credentials to backend /auth/login

​

On success, store token + redirect to protected page (e.g. /app)

​

Protected Pages

​

Logout

​

Simple JS that clears tokens and redirects to /login.

​

CORS & Domains

​

Backend must allow the Webflow/custom domain.

​

Developer must know how to test from *.webflow.io and from the final custom domain.

​

Optional: Members Layer

​

If you prefer not to hand-roll auth in JS, developer should know how to integrate tools like Memberstack, Outseta, Wized, Xano-frontend or similar, but still connect them to your backend (webhooks or custom endpoints).

​

Spec should state: “Preference for native/custom auth against our backend, not vendor lock-in.”

​

1. Security & UX Expectations

​

No secrets in frontend code.

​

Don’t log tokens.

​

Graceful error messages on login failure.

​

Loading states while fetching user data.

​

Mobile-first, accessible markup.

​

1. Nice-to-Have

​

Experience turning Webflow sections into reusable components for marketing.

​

Experience with Wized (Webflow → real app) for faster data binding.

​

Experience with SaaS/FinTech landing pages and gated content.

​

Basic understanding of the backend domain (cash management, accounts, transactions) to render the right fields.

​

1. Deliverables

​

Webflow project with all public pages.

​

Login, logout, and protected page flow working against staging backend.

​

Short integration doc (where code is, which endpoints are called, what env vars/domains are needed).

​

Example protected page that actually displays data from your backend (not just “You are logged in”).

• Experience exporting Webflow sites or adding custom code in the project settings / page settings / embeds
• Knowledge of Webflow form handling and how to override it with custom JS
• Frontend (Browser) Tech
• Solid HTML/CSS/JS (vanilla) to extend Webflow
• Comfortable writing small SPA-like modules inside Webflow pages (e.g. via script + a root div)
• Experience with fetch / Axios to call APIs
• Basic state management in vanilla JS (auth state, user object)
• Comfortable handling CORS constraints and preflight requests
• Understanding of JWT-based auth (access token + refresh token) OR session-based auth
• Knowledge of safe storage options and their trade-offs (local
• Ability to add route guards (JS checks on page load in Webflow)
• Knows how to handle 401/403 and re-authenticate or redirect
• Technical Requirements (How it should work)
• Login Page (Webflow)
• Webflow form → onsubmit JS handler
• On success, store token + redirect to protected page (e.g. /app)
• Backend must allow the Webflow/custom domain
• Developer must know how to test from *.webflow.io and from the final custom domain
• Spec should state: “Preference for native/custom auth against our backend, not vendor lock-in.”
• Security & UX Expectations
• Loading states while fetching user data
• Mobile-first, accessible markup
• Experience turning Webflow sections into reusable components for marketing
• Experience with Wized (Webflow → real app) for faster data binding
• Experience with SaaS/FinTech landing pages and gated content
• Basic understanding of the backend domain (cash management, accounts, transactions) to render the right fields

• Build and maintain a Webflow-based marketing / customer-facing site that supports user login and secured, backend-connected areas (dashboard-like content), using custom code embeds and API calls to your backend
• Create a high-quality, responsive website in Webflow that matches brand and product messaging
• Implement a login / signup / forgot password flow on top of Webflow using custom code
• After login, fetch user-specific data from your backend (e.g. plans, accounts, cashflow) and render it in Webflow pages or in embedded components
• Ensure secure token handling (JWT/Access+Refresh) in the browser
• Make the setup maintainable so that non-technical team members can still edit pages in Webflow
• Responsibilities
• Build pages, layouts, components, CMS collections in Webflow (homepage, pricing, contact, blog, FAQ, product explainer)
• Add custom code (HTML/JS) to:
• render login/sign-up forms (or override Webflow forms),
• call backend auth endpoints,
• store tokens (preferably in httpOnly cookies if backend supports it, otherwise secure local
• Storage with refresh flow)
• On page load, check auth state
• If not authenticated → redirect to login
• If authenticated → load user data from backend and inject into the page
• Integrate with GraphQL or REST endpoints exposed by your backend (the spec we did earlier)
• Implement error and state handling (loading spinners, error messages, form validation)
• Work with backend dev to agree on:
• Document the integration so future Webflow edits don’t break the auth
• Required Skills
• Expert at Webflow Designer (symbols, CMS collections, interactions, responsive breakpoints)
• Can consume REST or GraphQL endpoints from the browser
• Can map backend data → Webflow elements (e.g. fill a div with user’s name, list of accounts, balances)
• Webflow project with all public pages
• Login, logout, and protected page flow working against staging backend