Email confirmation flow in a Rails API and React frontend setup

Frontend
1

Hey everyone! I’m working on a project with a Rails API backend and a React frontend. I’m stuck on how to handle email confirmation links. Should they go straight to the backend or hit the frontend first?

I’ve thought of two approaches:

  1. The link goes to the backend, which then redirects to the frontend.
  2. The link opens the frontend, which then calls the backend API.

I’m leaning toward the first option, but I’m not totally sure. Has anyone encountered this issue and found a solid solution?

I attempted to use URL helpers for the frontend but ran into errors. Here’s a sample of my code:

class ConfirmEmailController < ApplicationController
  def process_confirmation
    outcome = ProcessEmailConfirmation.call(token: params[:token])
    if outcome.success?
      redirect_to frontend_success_url(email: outcome.user_email)
    else
      redirect_to frontend_failure_url
    end
  end
end

Any insights on making this setup work smoothly? Thanks!

2

I’ve faced a similar dilemma in my projects, and I’ve found that directing the confirmation link to the backend first (your option 1) is generally more secure and robust. Here’s why:

The backend can immediately validate the token and update the user’s status. This prevents any potential issues with token expiration or manipulation that could occur if the frontend handled it first.

After processing, the backend can redirect to a specific frontend route with query parameters indicating success or failure. This allows your React app to display appropriate messages or trigger further actions.

One caveat: ensure your backend CORS settings allow redirects to your frontend domain. Also, consider implementing a short-lived session token that the backend sends along with the redirect, which your frontend can use to fetch any additional user data securely.

This approach has served me well in maintaining a clear separation of concerns and ensuring data integrity.

3

i’ve done this before and went with option 2. its easier to handle on the frontend imo. you can grab the token from the url, send it to your api, and handle the response right there. plus it gives you more control over the user experience. just make sure to secure your api endpoints properly!

4

ooh, interesting dilemma! have you considered using a hybrid approach? Maybe send the link to a lightweight backend endpoint that quickly validates the token, then redirects to a specific frontend route with a temporary auth token? That way you get the best of both worlds - quick backend validation and smooth frontend UX. what do you think about that idea?