vuejs2passport.jssession-cookiespassport-github2

How to properly use passport-github for REST API authentication?


I am building a vue.js client which needs to be authenticated through github oauth using an express server. It's easy to do this using server side rendering but REST API has been troublesome for me.

I have set the homepage url as "http://localhost:3000" where the server runs and I want the authorization callback url to be "http://localhost:8080" (which hosts the client). I am redirecting to "http://localhost:3000/auth/github/redirect" instead, and in its callback redirecting to "http://localhost:8080". The problem I am facing is that I am unable to send user data to the vuejs client through res.redirect. I am not sure if I am doing it the right way.

router.get("/github", passport.authenticate("github"));

router.get(
  "/github/redirect",
  passport.authenticate("github", { failureRedirect: "/login" }),
  (req, res) => {
    // res.send(req.user);
    res.redirect("http://localhost:8080/"); // req.user should be sent with this
  }
);

Solution

  • I have implemented the following approach as a work around :-

    A route that returns the user details in a get request :

    router.get("/check", (req, res) => {
    if (req.user === undefined) {
      res.json({});
    } else {
      res.json({
        user: req.user
      });
    }
    });
    

    The client app hits this api right after redirection along with some necessary headers :

    checkIfLoggedIn() {
      const url = `${API_ROOT}auth/check/`;
      return axios(url, {
        headers: { "Content-Type": "application/json" },
        withCredentials: true
      });
    }
    

    To enable credentials, we have to pass the following options while configuring cors :

    var corsOption = {
      origin: true,
      credentials: true
    };
    
    app.use(cors(corsOption));