Integrating solution into framer.com project

Hey Juan, we don’t really know, but you could follow the generic guide below. We unfortunately haven’t tested it before, so do let us know if you hit any roadblocks as we might know a quick solution.

To integrate Kinde authentication services with a website or prototype built using Framer, you’ll need to combine Kinde’s authentication capabilities with Framer’s design and development environment.

Below is a step-by-step guide to help you set up this integration:
1. Create a Kinde Application:
- Create an Application: In your Kinde dashboard, create a new application. This will provide you with essential credentials like the Client ID and Client Secret.

2. Configure Application Settings in Kinde:
- Redirect URIs: Set the redirect URIs to point to your Framer site’s URLs where you want users to be redirected after authentication.
- Allowed Domains: Specify the domain where your Framer site will be hosted.

3. Set Up Your Framer Project:
- Enable Code Components: Ensure that your project settings allow for code components or code overrides.

4. Include Kinde SDK in Framer:
- Import Kinde SDK: Framer supports NPM packages in code components. You can import the Kinde SDK by running npm install kinde-auth-js in your project directory.
- Reference SDK in Code: In your code component, import the SDK:

```javascript
import { KindeClient } from 'kinde-auth-js';
```

5. Initialize Kinde Client in Framer:
- Set Up Configuration:

```javascript
const kindeClient = new KindeClient({
clientId: 'YOUR_CLIENT_ID',
domain: 'YOUR_KINDE_DOMAIN',
redirectUri: 'YOUR_REDIRECT_URI',
});
```

Replace 'YOUR_CLIENT_ID', 'YOUR_KINDE_DOMAIN', and 'YOUR_REDIRECT_URI' with the actual values from your Kinde application.

6. Implement Authentication Flows:
- Login Function:

```javascript
const handleLogin = () => {
kindeClient.login();
};
```

- Logout Function:

```javascript
const handleLogout = () => {
kindeClient.logout();
};
```

- Check Authentication Status:

```javascript
const isAuthenticated = kindeClient.isAuthenticated();
```

7. Update Framer Components:
- Add Buttons: In your Framer design, add buttons for “Login” and “Logout”.
- Attach Actions: Use code overrides to attach the handleLogin and handleLogout functions to these buttons.

```javascript
export function LoginButton(props) {
return <button onClick={handleLogin}>Login</button>;
}
export function LogoutButton(props) {
return <button onClick={handleLogout}>Logout</button>;
}
```

8. Handle Redirects and Tokens:
- Capture Tokens: After login, Kinde will redirect back to your site with authentication tokens in the URL parameters.
- Process Tokens: Use the Kinde SDK to process these tokens and establish a session.

```javascript
kindeClient.handleRedirectCallback();
```

9. Protect Routes and Components:
- Conditional Rendering: Use the isAuthenticated status to conditionally render protected components or pages.

```javascript
if (isAuthenticated) {
// Render protected content
} else {
// Render public content or redirect to login
}
```

10. Test Your Integration:
- Run Locally: Test the authentication flow in your local environment.
- Deploy: Once everything works locally, publish your Framer site.

11. Update Kinde Settings for Production:
- Production Redirect URIs: Make sure to update the redirect URIs in your Kinde dashboard to include your production site’s URL.

12. Security Best Practices:
- Environment Variables: Store sensitive information like Client ID and Client Secret in environment variables if possible.
- HTTPS: Ensure your site is served over HTTPS to secure authentication tokens.

Additional Tips:
- Refer to Documentation:
- [Kinde JavaScript SDK Documentation](https://docs.kinde.com/sdk/javascript)
- [Framer Code Components Guide](https://www.framer.com/docs/guides/code-components/)