Magic Link with Bubble

In this step-by-step guide, we'll show you how to integrate Xano's MagicLink extension with Bubble to enable passwordless login for your users. With MagicLink, your users can log in simply by clicking a secure link sent to their email, eliminating the need to remember and manage passwords.

Setting Up the MagicLink Function

First, we'll need to make a small modification to the `generateMagicLink` function provided by the MagicLink extension.

1. In Xano, go to the Library section and locate the `generateMagicLink` function.
2. Click on the function to open the editor.
3. Scroll down to line 9, where the `magicLink` variable is created using the `concat` filter.
4. Add `?token=` as a separator before the `magicLink` variable. This will allow us to include the magic token in the URL, making it easier to retrieve later.
5. Click Update* and then *Save to apply the changes.

Configuring API Endpoints in Xano

Next, we'll set up the necessary API endpoints in Xano.

1. Go to the API section and locate the `authMagicLink` endpoint. This endpoint accepts the user's email address and sends them the MagicLink.
2. Copy the URL for the `authMagicLink` endpoint to your clipboard.
3. Locate the `authMagicLogin` endpoint. This endpoint will exchange the MagicLink token for an authorization token, enabling user authentication.
4. Locate the `authMe` endpoint. This endpoint retrieves the authenticated user's information using the authorization token.

Setting Up API Calls in Bubble

With the Xano setup complete, let's move to Bubble and configure the API calls.

1. In Bubble, add a new API called "MagicLink."
2. Create a new API call called "Request MagicLink" and paste the `authMagicLink` endpoint URL from Xano.
3. Add an email parameter and set the value to your test email address (or a user's email address).
4. Create a new API call called "Login with MagicLink" and paste the `authMagicLogin` endpoint URL from Xano.
5. Add the body parameter by copying the example from the Xano endpoint documentation.
6. Replace the token value with a valid MagicLink token obtained by running the `generateMagicLink` function in Xano.
7. Create a new API call called "Authenticated Me" and paste the `authMe` endpoint URL from Xano.
8. Add an authorization header with the value `Bearer [auth_token]`, replacing `[auth_token]` with a valid authorization token obtained from Xano.

Connecting Bubble Workflows

Now, let's connect the API calls to Bubble workflows.

1. On the "Send Link to Log In" button, set up a workflow to call the "Request MagicLink" API when the button is clicked.
2. Create a new page called "Authenticated Page" and set the correct redirect URI in the MagicLink extension settings in Xano.
3. On the "Authenticated Page," set up a workflow to call the "Login with MagicLink" API when the page loads, using the `token` parameter from the URL.
4. After the "Login with MagicLink" API call, navigate to the "Authenticated Page" and send the `auth_token` as a page parameter.
5. On the "Authenticated Page" design, display the user's information by inserting dynamic data from the "Authenticated Me" API call, using the `auth_token` parameter for authorization.

Testing the Passwordless Login

With everything set up, you can now test the passwordless login flow.

1. Preview the index page in Bubble and enter your test email address.
2. Click "Send Link to Log In" to trigger the `authMagicLink` API call.
3. Check your email inbox for the MagicLink.
4. Click the MagicLink in your email to be redirected to the "Authenticated Page" in Bubble.
5. The "Authenticated Page" should display your user information, proving successful authentication via the MagicLink.

Congratulations! You've successfully integrated Xano's MagicLink extension with Bubble, enabling a seamless passwordless login experience for your users.