Integrated JWT Authorization

- Updated schema.graphql, react-auth0-spa, and App component

Author: prashant-shahi

todo-app-react/package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^7.1.2",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
+    "apollo-link-context": "^1.0.20",
     "apollo-link-http": "^1.5.17",
     "classnames": "^2.2.6",
     "graphql-tag": "^2.10.3",

todo-app-react/schema.graphql

@@ -1,4 +1,12 @@
-type Task {
+type Task @auth(
+    query: { rule: """
+        query($USER: String!) {
+            queryTask {
+                user(filter: { username: { eq: $USER } }) {
+                    __typename
+                }
+            }
+        }"""}), {
     id: ID!
     title: String! @search(by: [fulltext])
     completed: Boolean! @search
@@ -7,7 +15,9 @@ type Task {
 
 type User {
   username: String! @id @search(by: [hash])
-  name: String
+  name: String @search(by: [exact])
   tasks: [Task] @hasInverse(field: user)
 }
 
+
+# Authorization X-Auth-Token https://dgraph.io/jwt/claims RS256 "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAp/qw/KXH23bpOuhXzsDp\ndo9bGNqjd/OkH2LkCT0PKFx5i/lmvFXdd04fhJD0Z0K3pUe7xHcRn1pIbZWlhwOR\n7siaCh9L729OQjnrxU/aPOKwsD19YmLWwTeVpE7vhDejhnRaJ7Pz8GImX/z/Xo50\nPFSYdX28Fb3kssfo+cMBz2+7h1prKeLZyDk30ItK9MMj9S5y+UKHDwfLV/ZHSd8m\nVVEYRXUNNzLsxD2XaEC5ym2gCjEP1QTgago0iw3Bm2rNAMBePgo4OMgYjH9wOOuS\nVnyvHhZdwiZAd1XtJSehORzpErgDuV2ym3mw1G9mrDXDzX9vr5l5CuBc3BjnvcFC\nFwIDAQAB\n-----END PUBLIC KEY-----"

todo-app-react/src/App.js

@@ -6,6 +6,7 @@ import { InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloProvider } from "@apollo/react-hooks";
 import { createHttpLink } from "apollo-link-http";
 import { useAuth0 } from "./react-auth0-spa";
+import { setContext } from "apollo-link-context";
 
 import TodoApp from './TodoApp';
 import NavBar from "./NavBar";
@@ -15,26 +16,36 @@ import PrivateRoute from "./PrivateRoute";
 import config from "./config.json";
 import './App.css';
 
-const createApolloClient = () => {
+const createApolloClient = token => {
   const httpLink = createHttpLink({
     uri: config.graphqlUrl,
     options: {
       reconnect: true,
     },
   });
 
+  const authLink = setContext((_, { headers }) => {
+    // return the headers to the context so httpLink can read them
+    return {
+      headers: {
+        ...headers,
+        "X-Auth-Token": token,
+      },
+    };
+  });
+
   return new ApolloClient({
-    link: httpLink,
+    link: authLink.concat(httpLink),
     cache: new InMemoryCache()
   });
 }
 
-const App = () => {
+const App = ({idToken}) => {
   const { loading } = useAuth0();
   if (loading) {
     return <div>Loading...</div>;
   }
-  const client = createApolloClient();
+  const client = createApolloClient(idToken);
   return (
     <ApolloProvider client={client}>
       <div>

todo-app-react/src/react-auth0-spa.js

@@ -17,6 +17,7 @@ export const Auth0Provider = ({
   const [auth0Client, setAuth0] = useState();
   const [loading, setLoading] = useState(true);
   const [popupOpen, setPopupOpen] = useState(false);
+  const [idToken, setIdToken] = useState("");
 
   useEffect(() => {
     const initAuth0 = async () => {
@@ -36,6 +37,8 @@ export const Auth0Provider = ({
       if (isAuthenticated) {
         const user = await auth0FromHook.getUser();
         setUser(user);
+        const idTokenClaims = await auth0FromHook.getIdTokenClaims();
+        setIdToken(idTokenClaims.__raw);
       }
 
       setLoading(false);
@@ -62,6 +65,9 @@ export const Auth0Provider = ({
     setLoading(true);
     await auth0Client.handleRedirectCallback();
     const user = await auth0Client.getUser();
+    const idTokenClaims = await auth0Client.getIdTokenClaims();
+
+    setIdToken(idTokenClaims.__raw);
     setLoading(false);
     setIsAuthenticated(true);
     setUser(user);
@@ -83,7 +89,7 @@ export const Auth0Provider = ({
       }}
     >
       {children}
-      <App />
+      <App idToken={idToken} />
     </Auth0Context.Provider>
   );
-};
+};

todo-app-react/yarn.lock

@@ -2026,6 +2026,14 @@ apollo-client@^2.6.10:
     tslib "^1.10.0"
     zen-observable "^0.8.0"
 
+apollo-link-context@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/apollo-link-context/-/apollo-link-context-1.0.20.tgz#1939ac5dc65d6dff0c855ee53521150053c24676"
+  integrity sha512-MLLPYvhzNb8AglNsk2NcL9AvhO/Vc9hn2ZZuegbhRHGet3oGr0YH9s30NS9+ieoM0sGT11p7oZ6oAILM/kiRBA==
+  dependencies:
+    apollo-link "^1.2.14"
+    tslib "^1.9.3"
+
 apollo-link-http-common@^0.2.16:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz#756749dafc732792c8ca0923f9a40564b7c59ecc"