Search code examples
node.jsreactjscorspassport.jsapollo

Cannot authenticate locally with remote server

Summary:

When I try to run my front-end react application that connects to my running server, and then try to login, my isAuthenticated query is returning false when it should be returning true.

In Detail:

I have a deployed Node Apollo Server (via heroku) that uses graphql, express, and passport for authentication. The server can be found here(might take a minute to spin up) and uses this code. When I go to this server, I can login by running the following mutation:

mutation{
  loginUser(data:{email: "john@gmail.com", password: "abc"}){
    id
    email
    firstName
    lastName
  }
}

I then run the following query, and am returned true:

query{
  isAuthenticated
}

I want to perform this same operation on my front end application. The code for this can be found here. Just go to this repo, clone it, and then run yarn and then yarn start to get the application running. However, if you open the console, and then click the 'login' button and then click the 'isAuthenticated' button, you will see that 'isAuthenticated' returns as false, and not true.

Am I doing something wrong with how I am configuring express and its cors options or how I am setting up the http link on the front end? I have enabled cors for localhost:8080 so am unsure why I am seeing this effect.

expressMiddleware.use(cors({
  credentials: true,
  origin: 'http://localhost:8080',
}));

Some Relevant Files:

Solution

  • @jimmy - I tried the local setup and things seem to work fine.

    Here is a snapshot with isAuthenticated: true. enter image description here

    I changed the mini-server username and password to match with the mini-app username and password.

    mini-app

    const handleLogin = async (): Promise<void> => {
    await loginUser({
      variables: {
        email: 'dad@gmail.com',
        password: 'temp-password',
      },
    });
  };

    mini-server - src/users.ts

    export default [
  {
    id: '1',
    firstName: 'John',
    lastName: 'Smith',
    email: 'dad@gmail.com',
    password: 'temp-password',
  },
];