I have an issue with my Graphql server and react front-end.
When submitting a "signin" mutation, the mutation is handled correctly and data received.
The "Set-Cookie" is received in the response headers, but its not stored in the browser cookies.
I have tried proposed solutions from myriad of other discussions on Stack Overflow but to no avail.
Here is my Back-End code:
index.js
const express = require("express");
const mongoose = require("mongoose");
const { ApolloServer, AuthenticationError } = require("apollo-server-express");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const jwt = require("jsonwebtoken");
const resolvers = require("./graphql/resolvers");
const typeDefs = require("./graphql/typeDefs");
require("dotenv").config();
const users = [
{
id: 1,
name: "Test user",
email: "your@email.com",
password: "$2b$10$ahs7h0hNH8ffAVg6PwgovO3AVzn1izNFHn.su9gcJnUWUzb2Rcb2W" // = ssseeeecrreeet
}
];
mongoose
.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log("DB Connected"))
.catch(err => console.error(err));
const corsOptions = {
credentials: true,
origin: "http://localhost:3000"
};
const app = express();
const port = 4000;
app.use(cors(corsOptions));
app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const context = async request => {
let authToken = null;
let currentUser = null;
const { headers } = request.req;
try {
authToken = headers.authorization || "";
if (authToken) {
currentUser = jwt.verify(authToken, process.env.SECRET_KEY);
}
} catch (error) {
throw new AuthenticationError(
"Authentication token is invalid, please log in"
);
}
return { request, currentUser };
};
const server = new ApolloServer({
typeDefs,
resolvers,
context
});
server.applyMiddleware({ app, path: "/graphql" });
app.listen(port, () => console.log(`Server started: http://localhost:${port}`));
resolvers.js
module.exports = {
Mutation: {
signin: async (root, args, ctx) => {
console.log(ctx.currentUser);
// Make email lowercase
const email = args.email.toLowerCase();
// Check if User exists
const userExist = await User.findOne({ email });
if (!userExist) {
throw new Error("User does not exist, please signup for new account");
}
// Check if passwords match
const match = await bcrypt.compare(args.password, userExist.password);
if (!match) {
throw new Error("Invalid username or Password");
}
// Create a token and assign
const token = jwt.sign(
{ email: userExist.email, id: userExist._id },
process.env.SECRET_KEY,
{ expiresIn: "1day" }
);
// Assign to cookie
ctx.request.res.cookie("token", token, {
httpOnly: true,
maxAge: 60 * 60 // 1 Hour
// secure: true, //on HTTPS
// domain: 'example.com', //set your domain
});
return userExist;
}
}
};
Then on the Client (React) side:
import React, { useContext, useReducer } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from "./App";
import Splash from "./pages/Splash";
import Context from "./context";
import reducer from "./reducer";
import ProtectedRoute from "./ProtectedRoute";
import * as serviceWorker from "./serviceWorker";
import { ApolloProvider } from "react-apollo";
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
const client = new ApolloClient({
link: createHttpLink({
uri: "http://localhost:4000/graphql",
credentials: "include"
}),
cache: new InMemoryCache()
});
const Root = () => {
const initialState = useContext(Context);
const [state, dispatch] = useReducer(reducer, initialState);
return (
<Router>
<ApolloProvider client={client}>
<Context.Provider value={{ state, dispatch }}>
<Switch>
<ProtectedRoute exact path="/" component={App} />
<Route path="/login" component={Splash} />
</Switch>
</Context.Provider>
</ApolloProvider>
</Router>
);
};
ReactDOM.render(<Root />, document.getElementById("root"));
Login.js component
// Imports Omitted
export default function SignIn() {
const onSubmit = async ({ email, password }) => {
const variables = { email, password };
const client = new GraphQLClient(BASE_URL);
const data = await client.request(SIGNIN_MUTATION, variables);
console.log(data);
};
// return info omitted
