How to authenticate user request in my own backend

Post author
Deividas Kovger

Hey, I'm building a Saas app on Webflow + Memberstack. It will have a paid chat with AI feature which I'm building as a separate React app and embedding it in the /chat page as an iframe. All the requests are going through my Laravel backend, I also have a database where I store the conversations. The feature should only be accessible to authenticated users, they will be able to see their conversation history and the prompts will be personalised. I'm attaching a diagram for clarity. 

My question is - how should I make the requests to my backend authenticated via memberstack?


Comments

2 comments

  • Comment author
    Josh Lopez

    Hello Deividas Kovger

    Thank you for posting. To authenticate requests to your Laravel backend via Memberstack for your SaaS app, follow these steps:

    1. User Authentication: Use the Memberstack DOM Package to handle user authentication in your React app. You can implement email/password authentication or passwordless authentication using magic links. Here’s an example of how to log in a user:

       ```javascript
       memberstack.loginMemberEmailPassword({ 
         email: "member@example.com", 
         password: "password123" 
       }).then(result => { 
         console.log(result.member); 
       }).catch(error => { 
         // handle login failure 
       });
       ```

    2. Access Token: After successful authentication, Memberstack provides an access token (JWT). You need to extract this token and include it in the headers of your requests to your Laravel backend.

    3. Making Authenticated Requests: Use Axios or Fetch API to make requests to your backend, including the access token in the Authorization header. Here’s an example using Axios:

       ```javascript
       import axios from 'axios';

       const fetchData = async () => {
         const token = "yourAccessToken"; // Replace with the actual token
         const response = await axios.get('/api/data', {
           headers: {
             Authorization: `Bearer ${token}`
           }
         });
         return response.data;
       };
       ```

    4. Verifying the Token on the Backend: On your Laravel backend, you need to verify the access token received in the request. For this, you will need to use the Memberstack Admin Package. This package allows you to verify the JWT token securely.

       Example in Laravel:
       ```php
       $token = $request->header('Authorization');
       $token = str_replace('Bearer ', '', $token);
       const memberstackAdmin = require('@memberstack/admin');
       memberstackAdmin.init('YOUR_SECRET_KEY');

       const { id, email } = await memberstackAdmin.verifyToken({ token });
       ```

    5. Handling Permissions: Implement permission checks on your backend to ensure that only authenticated users can access their conversation history and personalized prompts. You can manage permissions based on the user's role or other criteria defined in your Memberstack setup.

    Conclusion
    By following these steps, you can ensure that your requests to the backend are authenticated and secure, allowing only authorized users to access the chat feature and their conversation history. Make sure to use the Memberstack Admin Package for token verification and member management on your backend.

    For more detailed information, you can refer to the Memberstack Admin Package documentation.

    0
  • Comment author
    Deividas Kovger

    Thank you!

    0

Please sign in to leave a comment.