Building Full Stack Applications with GraphQL/

...

/

Authentication on the Frontend

Authentication on the Frontend

Learn how to implement GraphQL implementation with a React frontend.

We'll cover the following...

We’ve spent the last three lessons implementing authentication on our application’s backend. Now, it’s time to update the frontend code.

Fortunately, the frontend implementation will be much simpler. We’ll update the Apollo Client to send cookies with outgoing requests. Then, we’ll implement the login form, which will be very similar to what we’ve already done. Finally, we’ll look into making our authentication flow work well with React.

Sending cookies to the server

Similar to how we enabled Apollo Explorer to include cookies with outgoing requests, we need to enable cookies in the ApolloClient configuration. To do this, we need to change the configuration of the HTTP connection that ApolloClient uses. To configure the HTTP connection, we create an instance of HttpLink and configure ApolloClient to use it.

Press + to interact
// index.js
// HTTP Link instructing to send cookies with every request
const link = createHttpLink({
  uri: 'http://localhost:4000/graphql',
  credentials: 'include'
})
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link,
})
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
  </React.StrictMode>,
  document.getElementById('root'),
)

Links in Apollo Client are a way of injecting additional logic into the request/response processing, similar to Express middleware. They can be used to implement retries, authorization handling, request batching, error handling, and much more. Details for how to use links are outside the scope of this course, but ...