Combining NodeJS-based passport auth and ReactJS frontend

Question

I've built a backend using Loopback with passport auth. It requires that I first visit http://localhost:3001/auth/github, which redirects to GitHub, which either displays a login page, or redirects back to my app on port 3001.

Now I'm building a ReactJS frontend on :3000. It's supposed to send AJAX calls to the backend appending the auth token as a query string parameter. I've added port forwarding to the client's package.json, so all AJAX calls are handled correctly.

What I can't figure is how to get the auth token (received as a cookie from http://localhost:3001/auth/github/callback) to the client side. While my AJAX calls are proxied correctly, when I navigate to /auth/github, I'm still on the React-generated page, and my :3001 endpoint isn't hit. If I go to :3001/auth/github, I'm not getting my auth_token cookie by my frontend code.

In other words, I have two problems: 1. How to navigate to my backend's auth page (http://localhost:3001/auth/github) from the frontend? 2. How to get the cookie obtained in #1 to my frontend so that it could be used in the subsequent queries?

As I'm building a demo, I only need a quick and dirty solution that Just Works, but I'm willing to consider other ideas like opening a popup window and/or an IFrame.

Answer 1

Some suggestion to work on it:

1. How to navigate to my backend's auth page (http://localhost:3001/auth/github) from the frontend?

Use Proxy on your React client (inside package.json) Example:

 {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/auth/github": {
      "target": "http://localhost:3001"
    },
    "/api/*": {
      "target": "http://localhost:3001"
    }
  },
  "dependencies": {
    "axios": "^0.16.2",
    "materialize-css": "^0.99.0",
    "react": "^16.0.0-alpha.13",
    "react-dom": "^16.0.0-alpha.13",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "react-scripts": "1.0.10",
    "react-stripe-checkout": "^2.4.0",
    "redux": "^3.7.1",
    "redux-form": "^7.0.1",
    "redux-thunk": "^2.2.0"
  },
}

So that when you access the api from your front you can refer it directly using '/auth/github'

2. How to get the cookie obtained in #1 to my frontend so that it could be used in the subsequent queries?

I'm not sure about Loopback backend, but when I used Express, you can set using passport.session() from passport to get the session cookie

hope this helps.