How to allow customers to log in or sign up on a Checkout page (Beta)

IMPORTANT NOTE: This feature is currently in beta. As such, it is subject to change and may not have full functionality in its current state. We appreciate your patience and feedback during this phase. Please report any issues or provide feedback to your designated Customer Success Manager.

This guide will walk you through the process of setting up an authenticated checkout page using an external authentication provider.

Use Cases

The primary use case for this feature is to allow users to sign up or register directly within the checkout page. This streamlined process offers several benefits:

1. Reduced Friction: Users can create an account as part of their purchase process, eliminating the need to navigate away from the checkout page.

2. Increased Conversion: By simplifying the signup process, you can potentially increase the number of completed purchases.

Steps

1. Create an Authenticated Checkout Page

Start by creating a new checkout page in your system that requires authentication.

2. Set Up Anonymous Authentication

Configure your system to use anonymous authentication as the primary authentication provider. This will allow users to begin the checkout process without immediately requiring them to log in.

This guide will walk you through the steps required.

3. Set Up the Authentication Provider required for your checkout.

Choose and configure the external authentication provider you wish to use. This can be done by going to Settings -> Authentication Providers:

Note: this process currently only supports using our OpenID Connect option.

Fill out the required fields and press save. Follow the specific instructions for your chosen provider to properly integrate it.

More details is available on How to federate your Authentication provider via OAuth and OpenID with Limio.

4. Add the iFrame Component to the Checkout Page

On your checkout page, add an iFrame component. The URL for this iFrame should follow this structure:

https://your-domain.com/api/sf/oauth2/authorize?authProvider=your_provider&redirect_uri=https://your-domain.com/logged-in&linkExternal=true

Replace `your-domain.com` with your actual domain, and `your_provider` with the name of your auth provider (e.g., `auth0`).

Key parameters:
- `linkExternal=true`: This flag is crucial for linking the identities from your authentication provider to a Limio identity.
- `authProvider=your_provider`: This should match the name of the auth provider you added in step 3.

5. Configure Allowed Hosts

Depending on your setup, you may need to add any required hosts to the allowed hosts or allowed ancestors list in your Limio configuration. 

This can be added at Settings -> Allowed Hosts.

6. Test the Checkout Process

Proceed through the checkout process and test the login/signup functionality via the iFrame. Ensure that users can successfully authenticate using the external provider.

7. Verify User Creation

After completing the checkout, verify that a new `@limio/external-id` has been created in your app. This should be linked to a regular `@limio/id` which owns the subscription or other relevant objects.

Troubleshooting

If you encounter issues:
- Double-check that the `authProvider` parameter matches exactly with the name you set up in step 3.
- Ensure all necessary hosts are included in your allowed hosts list.
- Verify that the redirect URI is correct and matches your configuration in the external auth provider.

For further assistance, please contact our support team.

Feedback and Issues

As this feature is in beta, we highly value your input. If you encounter any issues, have suggestions for improvements, or would like to provide general feedback, please don't hesitate to reach out to your Customer Success Manager. Your experiences and insights are crucial in helping us refine and enhance this feature.