rare-sapphire•2d ago

What would be the optimal way to integrate stytch auth magic links?

What would be the optimal way to integrate stytch auth magic links? It first send an email with a link which can be used for organization discovery and only after selecting the organization we can get the organization level token and consider them logged in. I am thinking of not using the auth provider provided by refine and do it some other way, but I wanted to know if I take some other approaches.

5 Replies

kapa.ai•2d ago

Hi @Nishant Shrestha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The optimal way to integrate Stytch auth magic links with Refine is to implement a custom authProvider that fits your authentication flow. Refine is designed to be flexible and allows you to use any third-party authentication system, including Stytch, by implementing the required methods in the authProvider interface. This approach enables you to leverage Refine’s built-in authentication hooks and components, such as useLogin, useIsAuthenticated, and Authenticated, for a seamless experience. Recommended Approach: 1. Implement a Custom authProvider:
- In your authProvider’s login method, trigger the Stytch magic link email.
- After the user clicks the magic link and is redirected back (e.g., to a /callback or /select-organization page), handle the token exchange and organization discovery. - Once the user selects an organization and you obtain the organization-level token, consider the user authenticated and store the token (e.g., in localStorage). - Implement the check, logout, and getIdentity methods to manage session state and user info as needed. 2. Leverage Refine’s Auth Hooks and Components:
By providing your custom authProvider to the <Refine /> component, you can use all of Refine’s authentication features, such as route protection and user context, without having to reimplement these mechanisms yourself.
Example structure for authProvider methods can be found in the documentation, and you can adapt them to your Stytch flow by calling Stytch APIs where appropriate and handling tokens accordingly Auth Provider Reference. 3. Handle Multi-step Flows:
For flows like organization discovery after magic link login, you can: - Store a temporary token after the magic link is verified. - Present the organization selection UI. - After selection, exchange for the final org-level token and update the session in your authProvider. Why not bypass the authProvider?
While you could manage authentication outside of Refine, you would lose the benefits of Refine’s built-in authentication hooks, route protection, and UI integrations. The recommended and optimal approach is to implement a custom authProvider tailored to your Stytch flow, as Refine is designed for such extensibility Authentication Guide. Summary:
- Implement a custom authProvider for Stytch magic links. - Use the login method for magic link initiation and handle the callback for organization selection and token storage. - Implement check, logout, and getIdentity for session management. - Pass your authProvider to <Refine /> to use all authentication features. This approach is consistent with how Refine recommends integrating third-party or custom authentication systems, including multi-step flows like yours. There are no Stytch-specific examples in the knowledge sources, but the general pattern for custom providers is well-documented and flexible for your use case Auth Provider Reference, Authentication Guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@717251086196539412> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rare-sapphireOP•2d ago

While in organization discovery mode what would be the logic inside the check method? @kapa.ai While in organization discovery mode what would be the logic inside the check method?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the logic inside the check method of your authProvider should reflect the user's authentication state. In your scenario, while the user is in "organization discovery mode" (i.e., they have verified their magic link but have not yet selected an organization or received an organization-level token), the user should not be considered fully authenticated. The check method should return authenticated: false, and you can optionally provide a redirectTo property to send the user to the organization selection page. Here’s a pattern based on the documented examples:

check: async () => {
    // Pseudocode: check if org-level token exists
    const orgToken = localStorage.getItem("org_token");
    if (orgToken) {
        return { authenticated: true };
    }

    // Optionally, check if user is in org discovery mode (e.g., has a temp token)
    const tempToken = localStorage.getItem("temp_token");
    if (tempToken) {
        return {
            authenticated: false,
            redirectTo: "/select-organization", // or your org discovery route
        };
    }

    return {
        authenticated: false,
        redirectTo: "/login",
        logout: true,
        error: { message: "Not authenticated", name: "Unauthorized" },
    };
}

check: async () => {
    // Pseudocode: check if org-level token exists
    const orgToken = localStorage.getItem("org_token");
    if (orgToken) {
        return { authenticated: true };
    }

    // Optionally, check if user is in org discovery mode (e.g., has a temp token)
    const tempToken = localStorage.getItem("temp_token");
    if (tempToken) {
        return {
            authenticated: false,
            redirectTo: "/select-organization", // or your org discovery route
        };
    }

    return {
        authenticated: false,
        redirectTo: "/login",
        logout: true,
        error: { message: "Not authenticated", name: "Unauthorized" },
    };
}

This approach is consistent with Refine’s documented usage, where the check method determines authentication status and can redirect unauthenticated users to a specific page as needed Auth Provider check method, Usage with Existing Projects. If you need to support public pages or optional authentication, you can omit the redirectTo property for those cases React Router FAQ. Summary:
While in organization discovery mode, the check method should return authenticated: false and redirect the user to the organization selection page until the org-level token is obtained. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@717251086196539412> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

What would be the optimal way to integrate stytch auth magic links?

Did you find this page helpful?