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.