Redirect after login

src/App.jsx

@@ -20,6 +20,7 @@ import {
   Switch,
   Route,
   Redirect,
+  useLocation,
 } from "react-router-dom";
 import { useConferenceCallManager } from "./ConferenceCallManagerHooks";
 import { JoinOrCreateRoom } from "./JoinOrCreateRoom";
@@ -48,16 +49,34 @@ export default function App() {
                 <LoginOrRegister onRegister={register} onLogin={login} />
               )}
             </Route>
-            <Route path="/room/:roomId">
-              {!authenticated ? (
-                <Redirect to="/" />
-              ) : (
-                <Room manager={manager} />
-              )}
-            </Route>
+            <AuthenticatedRoute
+              authenticated={authenticated}
+              path="/room/:roomId"
+            >
+              <Room manager={manager} />
+            </AuthenticatedRoute>
           </Switch>
         )}
       </div>
     </Router>
   );
 }
+
+function AuthenticatedRoute({ authenticated, children, ...rest }) {
+  const location = useLocation();
+
+  return (
+    <Route {...rest}>
+      {authenticated ? (
+        children
+      ) : (
+        <Redirect
+          to={{
+            pathname: "/",
+            state: { from: location },
+          }}
+        />
+      )}
+    </Route>
+  );
+}

src/ConferenceCallManagerHooks.js

@@ -63,7 +63,7 @@ export function useConferenceCallManager(homeserverUrl) {
       });
   }, []);
 
-  const login = useCallback(async (username, password) => {
+  const login = useCallback(async (username, password, cb) => {
     setState((prevState) => ({
       ...prevState,
       authenticated: false,
@@ -78,6 +78,10 @@ export function useConferenceCallManager(homeserverUrl) {
           authenticated: true,
           error: undefined,
         });
+
+        if (cb) {
+          cb();
+        }
       })
       .catch((err) => {
         console.error(err);
@@ -91,7 +95,7 @@ export function useConferenceCallManager(homeserverUrl) {
       });
   }, []);
 
-  const register = useCallback(async (username, password) => {
+  const register = useCallback(async (username, password, cb) => {
     setState((prevState) => ({
       ...prevState,
       authenticated: false,
@@ -106,6 +110,10 @@ export function useConferenceCallManager(homeserverUrl) {
           authenticated: true,
           error: undefined,
         });
+
+        if (cb) {
+          cb();
+        }
       })
       .catch((err) => {
         console.error(err);

src/LoginOrRegister.jsx

@@ -15,25 +15,47 @@ limitations under the License.
 */
 
 import React, { useCallback, useRef } from "react";
+import { useHistory, useLocation } from "react-router-dom";
 
 export function LoginOrRegister({ onRegister, onLogin }) {
   const registerUsernameRef = useRef();
   const registerPasswordRef = useRef();
   const loginUsernameRef = useRef();
   const loginPasswordRef = useRef();
+  const history = useHistory();
+  const location = useLocation();
 
-  const onSubmitRegisterForm = useCallback((e) => {
-    e.preventDefault();
-    onRegister(
-      registerUsernameRef.current.value,
-      registerPasswordRef.current.value
-    );
-  });
+  const onSubmitRegisterForm = useCallback(
+    (e) => {
+      e.preventDefault();
+      onRegister(
+        registerUsernameRef.current.value,
+        registerPasswordRef.current.value,
+        () => {
+          if (location.state && location.state.from) {
+            history.replace(location.state.from);
+          }
+        }
+      );
+    },
+    [onRegister, location, history]
+  );
 
-  const onSubmitLoginForm = useCallback((e) => {
-    e.preventDefault();
-    onLogin(loginUsernameRef.current.value, loginPasswordRef.current.value);
-  });
+  const onSubmitLoginForm = useCallback(
+    (e) => {
+      e.preventDefault();
+      onLogin(
+        loginUsernameRef.current.value,
+        loginPasswordRef.current.value,
+        () => {
+          if (location.state && location.state.from) {
+            history.replace(location.state.from);
+          }
+        }
+      );
+    },
+    [onLogin, location, history]
+  );
 
   return (
     <div className="page">