Build a GraphQL Client Application to Consumer Protected GraphQL API Resources Part 3

For this react application, let's define the routing for various resources. As per this sample application, we will have:

In our application routing, let's define the router and the auth redirects. We will use the SecureAuth Auth SDK to handle OAuth authorization (code => token exchange), redirects and setting of the accessToken. If an accessToken is not available in the local storage, the user will be redirected to the page where they can see the authorize button and contents that do not require authorized tokens.

In the index.js file, located in the src directory of the app, we'll add:

function App() {

  //const navigate = useNavigate();
  const cloudentity = new SecureAuthAuth(authConfig);
  const [authenticated] = useAuth(cloudentity);
  const accessTokenRaw = localStorage.getItem(authConfig.accessTokenName);
  const auth = authenticated && accessTokenRaw;

  return (
    <Router>
      <div>
        <Routes>
          <Route path="/usertweet"  element={!auth ?<HomePageContent auth={auth} /> : <Navigate to='/usertweet' /> }></Route>
          </Route>
          <Route path="/"  element={!auth ? <HomePageContent auth={auth} /> : <Navigate to='/usertweet' /> }>
          </Route>
        </Routes>
      </div>
    </Router>
  );
}            

As you can see the public page is at HomePageContent that is served by the homepage.js. Let's dive into that snippet for some explanation.

homepage.js contains mainly two main elements of interest other than navigation and style elements:

We need to configure the GraphQL API client to send in an authorization token (if available) retrieved from the browser's local storage. If not, it will make GraphQL API calls without this authorization token. More details and explanation about usage of apollo client can be found here.

import {
    ApolloClient,
    InMemoryCache,
    ApolloProvider,
    createHttpLink,
    from
  } from "@apollo/client";
  import { setContext } from '@apollo/client/link/context';
  import { onError } from "@apollo/client/link/error";

const httpLink = createHttpLink(
  {
    uri: 'graphql',
    credentials: 'same-origin'
  }
);

const authLink = setContext( (_, {headers}) => {
  // get the authentication token from local storage if it exists

 const accessTokenRaw = localStorage.getItem(authConfig.accessTokenName);
  //return the headers to the context so httpLink can read them

  return {
    headers: {
      ...headers,
      authorization: accessTokenRaw ? `Bearer ${accessTokenRaw}`: "",
    }
  }
});

//https://www.apollographql.com/docs/react/api/link/apollo-link-error/
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});


const client = new ApolloClient (
  {
    link: from([authLink, errorLink, httpLink]),
    cache: new InMemoryCache()
  }
);            

To consume any resources protected by the SecureAuth authorization server, the consuming applications must first register themselves in the SecureAuth authorization platform. As a quick reminder, we will be using open standard based OAuth flows for all these integrations.

Get into the SecureAuth portal and register a single page client application. Follow this SecureAuth article to register a client application in the SecureAuth authorization platform.

Now that we have a registered client application, we will feed that into the configuration settings for the application we have been building.

The authConfig.ts file contains the configuration required to handshake with the SecureAuth authorization platform to obtain an access token to consume resources on behalf of an end user. The underlying SecureAuth SDK uses the authorization code grant with PKCE flow to get the access token. Read more about the OAuth PKCE flow.

const authConfig = {
    domain: 'rtest.connect.secureauth.com', // e.g. 'example.demo.cloudentity.com.' Recommended; always generates URLs with 'https' protocol.
     // baseUrl: optional alternative to 'domain.' Protocol required, e.g. 'https://example.demo.cloudentity.com.'
     // In situations where protocol may dynamically resolve to 'http' rather than 'https' (for example in dev mode), use 'baseUrl' rather than 'domain'.
     tenantId: 'rtest',
     authorizationServerId: 'ce-dev-playground-integrations',
     clientId: 'c7e6u0eer3qh0m4pggig',
     redirectUri: 'http://localhost:3000/',
     silentAuthRedirectUri: 'window.location.href' + '/silent', // optional setting to redirect to a different endpoint following successful silent auth flow
     userInfoUri: 'https://rtest.connect.secureauth.com/rtest/ce-dev-playground-integrations/userinfo', // optional, for fetching user info via API
     scopes: ['profile', 'email', 'openid'], // 'revoke_tokens' scope must be present for 'logout' action to revoke token! Without it, token will only be deleted from browser's local storage.
     letClientSetAccessToken: true,
     accessTokenName: 'ins_demo_access_token', // optional; defaults to '{tenantId}_{authorizationServerId}_access_token'
     idTokenName: 'ins_demo_id_token', // optional; defaults to '{tenantId}_{authorizationServerId}_id_token'

 };

export default authConfig;            

Now that we have everything configured and ready to go, let's run the application and test it out.

To run the application, use the following command in your terminal:

npm start            

The application will be available under the following URL:

http://localhost:3001            

This wraps up the tutorial for a sample GraphQL client server application protected using the SecureAuth Authorization platform. In this series, you will have accomplished the following things: