Fix: Ensure actor is correctly authenticated (#19)

Pass the identity to the actor once authenticated

This ensures the agent will pass the user's Principal to the backend
code once they are authenticated.

Co-authored-by: Benjamin Goering <[email protected]>
Co-authored-by: Benjamin Goering <[email protected]>

Author: 3 people

dfx.json

@@ -29,12 +29,6 @@
     }
   },
   "networks": {
-    "ic": {
-      "providers": [
-        "https://gw.dfinity.network"
-      ],
-      "type": "persistent"
-    },
     "alpha": {
       "providers": [
         "https://mainnet.dfinity.network"
@@ -46,5 +40,5 @@
       "type": "ephemeral"
     }
   },
-  "dfx": "0.7.0-beta.6"
+  "dfx": "0.7.0"
 }

docs/local-with-internet-identity.md

@@ -0,0 +1,26 @@
+# Local Development with internet-identity
+
+Follow these steps to run cancan locally along with locally running [dfinity/internet-identity](https://github.com/dfinity/internet-identity) canisters on the same replica.
+
+## Overview
+
+The internet-identity canisters must be running on the same IC replica as the CanCan canisters.
+As long as both internet-identity and cancan's `local` network are running on the default port, this is pretty easy.
+
+CanCan must then be accessed in such a way that it uses the local internet-identity canisters to log in instead of the product internet-identity canisters.
+
+## Steps
+
+1. Follow the CanCan [README](../README.md) to start a local replica, deploy CanCan, and opn the app to the sign in screen.
+2. Clone the git repo for https://github.com/dfinity/internet-identity to another directory
+3. Ensure you have the correct dependencies to build internet-identity (e.g. `[email protected]` at time of this writing)
+5. Deploy internet-identity like:
+    ```
+    II_ENV=development dfx deploy --no-wallet --argument '(null)'
+    ```
+    * Explanation of command
+        * `II_ENV=development` is configures internet-identity to know it is running on a development replica.
+        * `dfx deploy --no-wallet --argument '(null)'` is from the internet-identity README
+    * When the deploy succeeds, take note of the canister id of internet-identity. You should be able to access internet-identity via a URL like `http://{canisters.internet-identity.id}.localhost:8000/`
+6. Access CanCan with URL querystring parameter `internetIdentityUrl` set to the local URL of internet-identity on the local replica, e.g. `http://ryjl3-tyaaa-aaaaa-aaaba-cai.localhost:8000/sign-in?internetIdentityUrl=http://rno2w-sqaaa-aaaaa-aaacq-cai.localhost:8000/`
+7. Click 'Authorize' and follow the prompts in the CanCan + internet-identity web pages.

package-lock.json

@@ -21,10 +21,10 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@dfinity/agent": "^0.8.8",
-    "@dfinity/auth-client": "^0.8.8",
-    "@dfinity/authentication": "^0.8.8",
-    "@dfinity/identity": "^0.8.8",
+    "@dfinity/agent": "^0.8.9",
+    "@dfinity/auth-client": "^0.8.9",
+    "@dfinity/authentication": "^0.8.9",
+    "@dfinity/identity": "^0.8.9",
     "lodash.debounce": "^4.0.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

package.json

@@ -25,21 +25,15 @@ function wrapRouteWithFade(Component) {
 }
 
 export function AppRouter() {
-  const {
-    user,
-    setUser,
-    isAuthenticated,
-    isAuthClientReady,
-    logOut,
-  } = useAuth();
+  const { user, setUser, isAuthenticated, isAuthReady, logOut } = useAuth();
 
   return (
     <Router>
       <Switch>
         {/* Root route, decides whether to redirect someone to feed, signup,
             or authorize, based on app state, only when auth client is ready */}
         <Route exact path="/">
-          {isAuthClientReady &&
+          {isAuthReady &&
             (isAuthenticated && user ? (
               <Redirect to={{ pathname: "/feed" }} />
             ) : isAuthenticated ? (

src/AppRouter.tsx

@@ -32,7 +32,7 @@ export function SignUp() {
   // with all the user's data. Show a loading message between these async
   // backend calls happening.
   useEffect(() => {
-    if (!auth.isAuthClientReady) return;
+    if (!auth.isAuthReady) return;
     if (auth.isAuthenticated && auth.identity !== undefined) {
       setIsCheckingICForUser(true);
       getUserNameByPrincipal(auth.identity.getPrincipal()).then((username) => {
@@ -50,7 +50,7 @@ export function SignUp() {
         }
       });
     }
-  }, [auth.isAuthClientReady, auth.isAuthenticated, auth.identity]);
+  }, [auth.isAuthReady, auth.isAuthenticated, auth.identity]);
 
   // Submit the form to signup with a new username, the backend ensures that
   // the username is available.

src/components/SignUp.tsx

@@ -6,12 +6,13 @@ import {
   KEY_LOCALSTORAGE_USER,
 } from "./index";
 
+import { actorController } from "./canister/actor";
 import { Identity } from "@dfinity/agent";
 import { ProfileInfoPlus } from "./canister/typings";
 
 export interface AuthContext {
   isAuthenticated: boolean;
-  isAuthClientReady: boolean;
+  isAuthReady: boolean;
   hasCanCanAccount: boolean;
   identity?: Identity;
   logIn: () => void;
@@ -108,6 +109,19 @@ export function useProvideAuth(authClient): AuthContext {
     }
   }, [user]);
 
+  useEffect(() => {
+    if (_identity && !_identity.getPrincipal().isAnonymous()) {
+      // The auth client isn't ready to make requests until it's completed the
+      // async authenticate actor method.
+      setAuthClientReady(false);
+      actorController.authenticateActor(_identity).then(() => {
+        setAuthClientReady(true);
+      });
+    } else {
+      actorController.unauthenticateActor();
+    }
+  }, [_identity]);
+
   // Just creating variables here so that it's pretty below
   const identity = _identity;
   const isAuthenticated = isAuthenticatedLocal;
@@ -137,7 +151,7 @@ export function useProvideAuth(authClient): AuthContext {
 
   return {
     isAuthenticated,
-    isAuthClientReady,
+    isAuthReady: isAuthClientReady && actorController.isReady,
     hasCanCanAccount: user !== undefined,
     logIn,
     logOut,

src/utils/auth.tsx

@@ -1,5 +1,11 @@
-import { Identity } from "@dfinity/agent";
-import { AuthClient } from "@dfinity/auth-client";
+import { Identity } from '@dfinity/agent';
+import { AuthClient } from '@dfinity/auth-client';
+
+// Where the IDP should be servied from
+const IDENTITY_URL =
+  new URLSearchParams(document.location.search).get('internetIdentityUrl') ||
+  process.env.REACT_APP_INTERNET_IDENTITY_URL ||
+  'https://identity.ic0.app';
 
 /*
  * A simple wrapper for the official auth client to initialize it and wrap
@@ -22,6 +28,7 @@ class AuthClientWrapper {
   async login(): Promise<Identity | undefined> {
     return new Promise(async (resolve) => {
       await this.authClient?.login({
+        identityProvider: IDENTITY_URL,
         onSuccess: async () => {
           resolve(this.authClient?.getIdentity());
         },
@@ -30,7 +37,7 @@ class AuthClientWrapper {
   }
 
   async logout() {
-    return this.authClient?.logout({ returnTo: "/" });
+    return this.authClient?.logout({ returnTo: '/' });
   }
 
   async getIdentity() {