How to set up Apollo client only after user authenticates?

Question

I'm a bit confused on how to structure my React/GraphQL (Apollo) app when no connection should be made until the user authenticates/logs in.

Currently I have this:

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <Router>
            <div>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/login">Log In</Link></li>
                <li><Link to="/signup">Sign Up</Link></li>
              </ul>
              <AuthenticatedRoute exact path="/" component={HomePage} />
              <Route path="/login" component={LoginPage} />
              <Route path="/signup" component={SignupPage} />
            </div>
          </Router>
        </Provider>
      </ApolloProvider>
    );
  }
}

Here's the creation of the network interface:

const networkInterface = createNetworkInterface({
  uri: process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000/graphql'
    : 'TBD',
});

networkInterface.use([
  {
    applyMiddleware(req, next) {
      if (!req.options.headers) {
        req.options.headers = {}; // Create the header object if needed.
      }

      getUserSession()
        .then(session => {
          // get the authentication token from local storage if it exists
          // ID token!
          req.options.headers.authorization = session
            .getIdToken()
            .getJwtToken();
        })
        .catch(err => {
          console.error('oh, this is bad');
        })
        .then(next);
    },
  },
]);

How do I organize this so that the Apollo client is only initialized and set up once, and only after the user has authenticated?

I'm wondering if I could use withApollo to somehow access the client directly and complete the GraphQL auth & connection that way.

Idea 2

Use Redux to track user state, wrap App with connect. When the user authenticates, this triggers a Redux state change which triggers App's componentDidUpdate which could create the network interface for Apollo, causing a re-render in App which would pass an authorized client into <ApolloProvider client={client}>.

Kreis

Answer 1

I typically listen for a "isLoggedIn" field to be set to true from redux. When it's set to true, I render the full app and add the authentication header so that the function adds the JWT token to all future requests.

import React, { Component } from 'react';
import { ApolloProvider } from 'react-apollo';
import makeStore from '../../store';
import createClient from '../../ApolloClient';

class Sample extends Component {
    login() {
       // login logic here;
    }
    routeTo() {
        // use props or state;
        let isLoggedIn = this.props.isLoggedIn || this.state.loggedIn;
        if(isLoggedIn) {
            const client = createClient(myToken);
            const store = makeStore(myToken);
                return (
                <ApolloProvider store={store} client={client} > 
                    <Routes screenProps={this.state}  />
                </ApolloProvider>);
        } else {
            return <LoginUI onPress={()=>this.login()}/>;
        }
    }
    render() {
        return(
         <div>
            {this.routeTo()}
          </div>
        );
}

Bleachers

Answer 2

I use ApolloClient example http://dev.apollodata.com/react/auth.html#Header

networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    // get the authentication token from local storage if it exists

    const token = localStorage.getItem('token');
    req.options.headers.authorization = token ? `Bearer ${token}` : null;
    next();
  }
}])

the block applyMiddleware will always run before fetching to GraphQL server, so you just need to set localStorage when login and delete when logout.

Haywoodhayyim

What about when you are using websockets? (subscriptions-transport-ws) – Hyaloid

just clipping myself to this, so I get a notification when someone answers this question ^ – Gaggle

Answer 3

In the setContext call for the authLink in this example: https://www.apollographql.com/docs/react/networking/authentication/#header , you can actually throw an error, like so:

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  if(!token) throw new Error('no auth');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

Guess what -- the client won't make requests until the method call actually returns; even nicer, it doesn't bubble the error either, so it doesn's splash in the console or break your code.

Krems

Answer 4

  const token = request.authToken; // localhost.get('authetoken)
  return {
    headers: {
      ...headers,
      Authorization: `Bearer ${token}`,
    },
  };
});```

setContext will take care of that for you 

Vitalism