Integrating Memberstack with Custom Scripts: Supporting Frontend and OAuth Logins

Post author
Anton Seledets

Hello Memberstack community!

I'm working on integrating Memberstack into a custom application, and I need some guidance on implementing a flexible authentication system that supports both Memberstack's frontend login and traditional OAuth flow, all while maintaining a single session. Here are my specific questions:

## 1. Dual Login Support

How can I implement a system that allows users to log in via:
a) Memberstack's frontend login (using Memberstack DOM)
b) Traditional OAuth flow with server-side handling through Memberstack oAuth provider. 

What's the best practice for managing these two login methods in parallel?

## 2. Session Management

Once a user is authenticated (through either method), how can I create and manage a single, unified session? Specifically:
- How do I store the Memberstack token securely?
- How can I verify the token's validity on subsequent requests?
- What's the recommended approach for session duration and renewal?

## 3. Server-Side Token Verification

For the frontend login method, what's the correct way to verify the token on the server-side? Is there a specific API endpoint or SDK method for this?

## 4. OAuth Flow Implementation

For the traditional OAuth flow:
- What's the correct authorization URL to use?
- How do I exchange the authorization code for an access token?
- Are there any specific considerations when implementing this alongside the frontend login method?

## 5. User Data Consistency

How can I ensure that user data remains consistent between the two login methods? Are there any pitfalls to watch out for?

## 7. Edge Cases

What are some common errors or edge cases I should be prepared for when supporting both login methods? How should these be handled?

## 8. Example Code or Boilerplate

Does Memberstack provide any example code or boilerplate for implementing this kind of dual-login system with custom backend integration?

UPD: 

I imagine a flow like this. 

Client-side Initiation:
User visits website.
JavaScript code checks if the user is already authenticated using Memberstack's DOM package.

Memberstack Authentication:
If not authenticated, the user is prompted to log in using Memberstack's UI.
Memberstack handles the login process and returns a JWT token upon successful authentication.

Server Communication:
JavaScript code receives the JWT token from Memberstack.
It then makes a request to API backend, including the JWT token in the Authorization header.

Server-side Verification:
API backendscript receives the request.
It extracts the JWT token from the Authorization header.
The script verifies the token with Memberstack's API.

Session Management:
If the token is valid, backend API script creates a server-side session for the user.
It stores relevant user information in the session.

Response to Client:
API backend script sends a response back to the client, confirming successful authentication.

Client-side Completion:
JavaScript handles the response, perhaps updating the UI to reflect the logged-in state.

Subsequent Requests:
For future requests, client-side code can check for an existing session.
If a session exists, it includes the JWT token with each request to backend.
API backend scripts continue to verify the token for each request that requires authentication.

Thank you in advance for any insights or guidance you can provide!  

Comments

1 comment

  • Comment author
    Chukwudi Onyekwere

    Hi Anton,

    Your outlined flow looks solid!

    When having two sites sharing a memberstack app the biggest thing to get right are the redirects. All the redirects have to be the same. This is why we don't recommend customers do this. The dual sites approach is mostly for testing purposes when all the redirects can be the same. Being logged into both sites at the same time usually doesn't work because the login is made on the domain.

    Please note that if you're using Webflow, all the server-side setup won't work.

    0

Please sign in to leave a comment.