Authentication

Authentication enables users to verify their identity, allowing you to control access to specific data and features in your application.

A typical authentication flow consists of these steps:

1. 1

   User provides credentials (e.g. a username and password)
2. 2

   Server validates and issues an access token
3. 3

   Client stores the token securely
4. 4

   Client includes the token with API requests
5. 5

   Server validates the token and grants access during API calls for data

This approach lets you implement secure authentication while keeping sensitive verification logic on your back end.

In Nordcraft, authentication is handled through API connections, allowing you to:

• Choose your preferred authentication system
• Integrate with existing providers
• Follow security best practices
• Support various authentication methods

Access tokens represent user authorization and must be protected from unauthorized access. Store tokens in HTTP-only cookies for security:

• HTTP-only cookies cannot be accessed by client-side JavaScript
• HTTP-only cookies are protected against cross-site scripting (XSS) attacks
• HTTP-only cookies are automatically available in API requests via the Nordcraft proxy

There are two approaches for storing access tokens securely in Nordcraft.

Set HTTP-only cookie

For login flows where users enter credentials (such as a username and password) directly in your application:

1. 1

   Create a workflow to call your authentication endpoint
2. 2

   Add the Set Session Cookies action to the On success callback event to set an HTTP-only cookie
3. 3

   Set the returned access token and expiration time in their respective inputs

For OAuth or third-party authentication providers that use redirects (like Supabase, Auth0 or Firebase):

1. 1

   Redirect users to the authentication provider to authenticate
2. 2

   Configure the provider to redirect back to your application at /.toddle?access_token=<Your access token>
3. 3

   Nordcraft automatically stores this token in a secure HTTP-only cookie
4. 4

   Optionally redirect users to a specific page after authentication using the query parameter redirect_to=<URL>

Once you have stored an access token, you will need to include it in subsequent API requests to authenticate the user:

Add authorization header

For bearer token authentication:

1. 1

   Select your API in the data panel
2. 2

   In the Headers tab of the API panel, click the + button to add a new header
3. 3

   Select Authorization as the header name
4. 4

   The value is set by default to output Bearer {{cookies.access_token}}, using Concatenate and Get Http-Only Cookie formulas; the value for the access_token will be replaced in the Nordcraft proxy with the actual token

Working with authenticated features in the Nordcraft editor requires a specific setup to securely share authentication between preview and editor environments.

Follow these steps to develop authenticated features:

1. 1

   Install browser extension
   • Chrome extension
   • Firefox extension
2. 2

   Log in through preview page
   • Authentication must first occur in the preview environment; you can open the preview through the Bottom Bar
   • With the extension installed, your authentication cookies are securely copied to the editor
3. 3

   Develop in the editor
   • Once authenticated, you can build and test protected features directly in the editor
   • There is no need to log in separately for the editor environment

Follow these security guidelines when implementing authentication:

• Short token lifetimes: Keep access tokens short-lived (hours, not days)
• Use refresh tokens: Implement refresh tokens for seamless token renewal; most back-end service providers support this
• Secure token storage: Store tokens in HTTP-only, secure cookies
• Back-end token validation: Ensure the back end validates tokens for every request
• Proper logout: Clear tokens on both client and server upon logout
• Avoid client-side storage: Never store sensitive data in localStorage or sessionStorage