diff --git a/data-browser/src/components/CodeBlock.tsx b/data-browser/src/components/CodeBlock.tsx
index 91c4e6884..481d8854d 100644
--- a/data-browser/src/components/CodeBlock.tsx
+++ b/data-browser/src/components/CodeBlock.tsx
@@ -7,9 +7,11 @@ import { Button } from './Button';
 interface CodeBlockProps {
   content?: string;
   loading?: boolean;
+  wrapContent?: boolean;
 }
 
-export function CodeBlock({ content, loading }: CodeBlockProps) {
+/** Codeblock with copy feature */
+export function CodeBlock({ content, loading, wrapContent }: CodeBlockProps) {
   const [isCopied, setIsCopied] = useState<string | undefined>(undefined);
 
   function copyToClipboard() {
@@ -19,7 +21,7 @@ export function CodeBlock({ content, loading }: CodeBlockProps) {
   }
 
   return (
-    <CodeBlockStyled data-code-content={content}>
+    <CodeBlockStyled data-code-content={content} wrapContent={wrapContent}>
       {loading ? (
         'loading...'
       ) : (
@@ -46,7 +48,11 @@ export function CodeBlock({ content, loading }: CodeBlockProps) {
   );
 }
 
-export const CodeBlockStyled = styled.pre`
+interface Props {
+  wrapContent?: boolean;
+}
+
+export const CodeBlockStyled = styled.pre<Props>`
   position: relative;
   background-color: ${p => p.theme.colors.bg1};
   border-radius: ${p => p.theme.radius};
@@ -55,4 +61,6 @@ export const CodeBlockStyled = styled.pre`
   font-family: monospace;
   width: 100%;
   overflow-x: auto;
+  word-wrap: ${p => (p.wrapContent ? 'break-word' : 'initial')};
+  white-space: ${p => (p.wrapContent ? 'pre-wrap' : 'initial')};
 `;
diff --git a/data-browser/src/components/Dialog/useDialog.tsx b/data-browser/src/components/Dialog/useDialog.tsx
index f405ee74b..476dfd316 100644
--- a/data-browser/src/components/Dialog/useDialog.tsx
+++ b/data-browser/src/components/Dialog/useDialog.tsx
@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from 'react';
 import { InternalDialogProps } from './index';
 
-export type UseDialogReturnType = [
+export type UseDialogReturnType = {
   /** Props meant to pass to a {@link Dialog} component */
-  dialogProps: InternalDialogProps,
+  dialogProps: InternalDialogProps;
   /** Function to show the dialog */
-  show: () => void,
+  show: () => void;
   /** Function to close the dialog */
-  close: () => void,
+  close: () => void;
   /** Boolean indicating wether the dialog is currently open */
-  isOpen: boolean,
-];
+  isOpen: boolean;
+};
 
 /** Sets up state, and functions to use with a {@link Dialog} */
 export const useDialog = (): UseDialogReturnType => {
@@ -40,5 +40,5 @@ export const useDialog = (): UseDialogReturnType => {
     [showDialog, close, handleClosed],
   );
 
-  return [dialogProps, show, close, visible];
+  return { dialogProps, show, close, isOpen: visible };
 };
diff --git a/data-browser/src/components/Guard.tsx b/data-browser/src/components/Guard.tsx
new file mode 100644
index 000000000..f3a7bc4f0
--- /dev/null
+++ b/data-browser/src/components/Guard.tsx
@@ -0,0 +1,375 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  useDialog,
+} from './Dialog';
+import React, { FormEvent, useCallback, useEffect, useState } from 'react';
+import { useSettings } from '../helpers/AppSettings';
+import { Button, ButtonInput } from './Button';
+import { Agent, nameRegex, useRegister, useServerURL } from '@tomic/react';
+import { FaEyeSlash, FaEye, FaCog } from 'react-icons/fa';
+import Field from './forms/Field';
+import { InputWrapper, InputStyled } from './forms/InputStyles';
+import { Row } from './Row';
+import { ErrorLook } from './ErrorLook';
+import { CodeBlock } from './CodeBlock';
+
+/**
+ * The Guard can be wrapped around a Component that depends on a user being logged in.
+ * If the user is not logged in, it will show a button to sign up / sign in.
+ * Show to users after a new Agent has been created.
+ * Instructs them to save their secret somewhere safe
+ */
+export function Guard({ children }: React.PropsWithChildren<any>): JSX.Element {
+  const { dialogProps, show } = useDialog();
+  const { agent } = useSettings();
+  const [register, setRegister] = useState(true);
+
+  if (agent) {
+    return <>{children}</>;
+  } else
+    return (
+      <>
+        <Row>
+          <Button
+            onClick={() => {
+              setRegister(true);
+              show();
+            }}
+          >
+            Register
+          </Button>
+          <Button
+            subtle
+            onClick={() => {
+              setRegister(false);
+              show();
+            }}
+          >
+            Sign In
+          </Button>
+        </Row>
+        <Dialog {...dialogProps}>{register ? <Register /> : <SignIn />}</Dialog>
+      </>
+    );
+}
+
+function Register() {
+  const [name, setName] = useState('');
+  const [secret, setSecret] = useState('');
+  const [driveURL, setDriveURL] = useState('');
+  const [newAgent, setNewAgent] = useState<Agent | undefined>(undefined);
+  const [serverUrlStr] = useServerURL();
+  const [err, setErr] = useState<Error | undefined>(undefined);
+  const register = useRegister();
+  const { setAgent } = useSettings();
+
+  const serverUrl = new URL(serverUrlStr);
+  serverUrl.host = `${name}.${serverUrl.host}`;
+
+  useEffect(() => {
+    // check regex of name, set error
+    if (!name.match(nameRegex)) {
+      setErr(new Error('Name must be lowercase and only contain numbers'));
+    } else {
+      setErr(undefined);
+    }
+  }, [name]);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent) => {
+      event.preventDefault();
+
+      if (!name) {
+        setErr(new Error('Name is required'));
+
+        return;
+      }
+
+      try {
+        const { driveURL: newDriveURL, agent } = await register(name);
+        setDriveURL(newDriveURL);
+        setSecret(agent.buildSecret());
+        setNewAgent(agent);
+      } catch (er) {
+        setErr(er);
+      }
+    },
+    [name],
+  );
+
+  const handleSaveAgent = useCallback(() => {
+    setAgent(newAgent);
+  }, [newAgent]);
+
+  if (driveURL) {
+    return (
+      <>
+        <DialogTitle>
+          <h1>Save your Passphrase, {name}</h1>
+        </DialogTitle>
+        <DialogContent>
+          <p>
+            Your Passphrase is like your password. Never share it with anyone.
+            Use a password manager to store it securely. You will need this to
+            log in next!
+          </p>
+          <CodeBlock content={secret} wrapContent />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleSaveAgent}>Continue here</Button>
+          <a href={driveURL} target='_blank' rel='noreferrer'>
+            Open my new Drive!
+          </a>
+        </DialogActions>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DialogTitle>
+        <h1>Register</h1>
+      </DialogTitle>
+      <DialogContent>
+        <form onSubmit={handleSubmit} id='register-form'>
+          <Field
+            label='Unique username'
+            helper='Becomes a part of your URL, e.g. `example.atomicdata.dev`'
+          >
+            <InputWrapper>
+              <InputStyled
+                autoFocus={true}
+                pattern={nameRegex}
+                type={'text'}
+                required
+                value={name}
+                onChange={e => {
+                  setName(e.target.value);
+                }}
+              />
+            </InputWrapper>
+          </Field>
+          {!err && name?.length > 0 && <code>{serverUrl.toString()}</code>}
+          {name && err && <ErrorLook>{err.message}</ErrorLook>}
+        </form>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          type='submit'
+          form='register-form'
+          disabled={!name || !!err}
+          onClick={handleSubmit}
+        >
+          Create
+        </Button>
+      </DialogActions>
+    </>
+  );
+}
+
+function SignIn() {
+  return (
+    <>
+      <DialogTitle>
+        <h1>Sign in </h1>
+      </DialogTitle>
+      <DialogContent>
+        <SettingsAgent />
+        <p>Lost your passphrase?</p>
+      </DialogContent>
+    </>
+  );
+}
+
+export const SettingsAgent: React.FunctionComponent = () => {
+  const { agent, setAgent } = useSettings();
+  const [subject, setSubject] = useState<string | undefined>(undefined);
+  const [privateKey, setPrivateKey] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [showPrivateKey, setShowPrivateKey] = useState(false);
+  const [advanced, setAdvanced] = useState(false);
+  const [secret, setSecret] = useState<string | undefined>(undefined);
+
+  // When there is an agent, set the advanced values
+  // Otherwise, reset the secret value
+  React.useEffect(() => {
+    if (agent !== undefined) {
+      fillAdvanced();
+    } else {
+      setSecret('');
+    }
+  }, [agent]);
+
+  // When the key or subject changes, update the secret
+  React.useEffect(() => {
+    renewSecret();
+  }, [subject, privateKey]);
+
+  function renewSecret() {
+    if (agent) {
+      setSecret(agent.buildSecret());
+    }
+  }
+
+  function fillAdvanced() {
+    try {
+      if (!agent) {
+        throw new Error('No agent set');
+      }
+
+      setSubject(agent.subject);
+      setPrivateKey(agent.privateKey);
+    } catch (e) {
+      const err = new Error('Cannot fill subject and privatekey fields.' + e);
+      setError(err);
+      setSubject('');
+    }
+  }
+
+  function setAgentIfChanged(oldAgent: Agent | undefined, newAgent: Agent) {
+    if (JSON.stringify(oldAgent) !== JSON.stringify(newAgent)) {
+      setAgent(newAgent);
+    }
+  }
+
+  /** Called when the secret or the subject is updated manually */
+  async function handleUpdateSubjectAndKey() {
+    renewSecret();
+    setError(undefined);
+
+    try {
+      const newAgent = new Agent(privateKey!, subject);
+      await newAgent.getPublicKey();
+      await newAgent.checkPublicKey();
+
+      setAgentIfChanged(agent, newAgent);
+    } catch (e) {
+      const err = new Error('Invalid Agent' + e);
+      setError(err);
+    }
+  }
+
+  function handleCopy() {
+    secret && navigator.clipboard.writeText(secret);
+  }
+
+  /** When the Secret updates, parse it and try if the */
+  async function handleUpdateSecret(updateSecret: string) {
+    setSecret(updateSecret);
+
+    if (updateSecret === '') {
+      setSecret('');
+      setError(undefined);
+
+      return;
+    }
+
+    setError(undefined);
+
+    try {
+      const newAgent = Agent.fromSecret(updateSecret);
+      setAgentIfChanged(agent, newAgent);
+      setPrivateKey(newAgent.privateKey);
+      setSubject(newAgent.subject);
+      // This will fail and throw if the agent is not public, which is by default
+      // await newAgent.checkPublicKey();
+    } catch (e) {
+      const err = new Error('Invalid secret. ' + e);
+      setError(err);
+    }
+  }
+
+  return (
+    <form>
+      <Field
+        label={agent ? 'Passphrase' : 'Enter your Passphrase'}
+        helper={
+          "The Agent Passphrase is a secret, long string of characters that encodes both the Subject and the Private Key. You can think of it as a combined username + password. Store it safely, and don't share it with others."
+        }
+        error={error}
+      >
+        <InputWrapper>
+          <InputStyled
+            value={secret}
+            onChange={e => handleUpdateSecret(e.target.value)}
+            type={showPrivateKey ? 'text' : 'password'}
+            disabled={agent !== undefined}
+            name='secret'
+            id='current-password'
+            autoComplete='current-password'
+            spellCheck='false'
+            placeholder='Paste your Passphrase'
+          />
+          <ButtonInput
+            type='button'
+            title={showPrivateKey ? 'Hide secret' : 'Show secret'}
+            onClick={() => setShowPrivateKey(!showPrivateKey)}
+          >
+            {showPrivateKey ? <FaEyeSlash /> : <FaEye />}
+          </ButtonInput>
+          <ButtonInput
+            type='button'
+            title={advanced ? 'Hide advanced' : 'Show advanced'}
+            onClick={() => setAdvanced(!advanced)}
+          >
+            <FaCog />
+          </ButtonInput>
+          {agent && (
+            <ButtonInput type='button' onClick={handleCopy}>
+              copy
+            </ButtonInput>
+          )}
+        </InputWrapper>
+      </Field>
+      {advanced ? (
+        <React.Fragment>
+          <Field
+            label='Subject URL'
+            helper={
+              'The link to your Agent, e.g. https://atomicdata.dev/agents/someAgent'
+            }
+          >
+            <InputWrapper>
+              <InputStyled
+                disabled={agent !== undefined}
+                value={subject}
+                onChange={e => {
+                  setSubject(e.target.value);
+                  handleUpdateSubjectAndKey();
+                }}
+              />
+            </InputWrapper>
+          </Field>
+          <Field
+            label='Private Key'
+            helper={
+              'The private key of the Agent, which is a Base64 encoded string.'
+            }
+          >
+            <InputWrapper>
+              <InputStyled
+                disabled={agent !== undefined}
+                type={showPrivateKey ? 'text' : 'password'}
+                value={privateKey}
+                onChange={e => {
+                  setPrivateKey(e.target.value);
+                  handleUpdateSubjectAndKey();
+                }}
+              />
+              <ButtonInput
+                type='button'
+                title={showPrivateKey ? 'Hide private key' : 'Show private key'}
+                onClick={() => setShowPrivateKey(!showPrivateKey)}
+              >
+                {showPrivateKey ? <FaEyeSlash /> : <FaEye />}
+              </ButtonInput>
+            </InputWrapper>
+          </Field>
+        </React.Fragment>
+      ) : null}
+    </form>
+  );
+};
diff --git a/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx b/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx
index c21ac23c9..c4feb4787 100644
--- a/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx
+++ b/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx
@@ -36,7 +36,7 @@ export function NewBookmarkButton({
 
   const [url, setUrl] = useState('');
 
-  const [dialogProps, show, hide] = useDialog();
+  const { dialogProps, show, close } = useDialog();
 
   const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
 
@@ -86,7 +86,7 @@ export function NewBookmarkButton({
           </form>
         </DialogContent>
         <DialogActions>
-          <Button onClick={hide} subtle>
+          <Button onClick={close} subtle>
             Cancel
           </Button>
           <Button onClick={onDone} disabled={url.trim() === ''}>
diff --git a/data-browser/src/components/Parent.tsx b/data-browser/src/components/Parent.tsx
index afc6d01e7..26e86e04a 100644
--- a/data-browser/src/components/Parent.tsx
+++ b/data-browser/src/components/Parent.tsx
@@ -53,6 +53,7 @@ const ParentWrapper = styled.nav`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
+  overflow-y: hidden;
 `;
 
 type NestedParentProps = {
@@ -99,6 +100,7 @@ const BreadCrumbBase = css`
   font-family: ${props => props.theme.fontFamily};
   padding: 0.1rem 0.5rem;
   color: ${p => p.theme.colors.textLight};
+  white-space: nowrap;
 `;
 
 const BreadCrumbCurrent = styled.div`
diff --git a/data-browser/src/components/SideBar/index.tsx b/data-browser/src/components/SideBar/index.tsx
index d2172129c..ece86c760 100644
--- a/data-browser/src/components/SideBar/index.tsx
+++ b/data-browser/src/components/SideBar/index.tsx
@@ -11,6 +11,7 @@ import { DragAreaBase, useResizable } from '../../hooks/useResizable';
 import { useCombineRefs } from '../../hooks/useCombineRefs';
 import { About } from './About';
 import { NavBarSpacer } from '../NavBarSpacer';
+import { Guard } from '../Guard';
 
 /** Amount of pixels where the sidebar automatically shows */
 export const SIDEBAR_TOGGLE_WIDTH = 600;
@@ -59,6 +60,7 @@ export function SideBar(): JSX.Element {
         <SideBarDriveMemo handleClickItem={closeSideBar} key={drive} />
         <SideBarBottom>
           <SideBarHeader>App</SideBarHeader>
+          <Guard />
           {appMenuItems.map(p => (
             <SideBarMenuItem
               key={p.label}
diff --git a/data-browser/src/routes/Routes.tsx b/data-browser/src/routes/Routes.tsx
index f552e53ce..4fdd9adf8 100644
--- a/data-browser/src/routes/Routes.tsx
+++ b/data-browser/src/routes/Routes.tsx
@@ -11,7 +11,7 @@ import Data from './DataRoute';
 import { Shortcuts } from './ShortcutsRoute';
 import { About as About } from './AboutRoute';
 import Local from './LocalRoute';
-import SettingsAgent from './SettingsAgent';
+import { SettingsAgentRoute } from './SettingsAgent';
 import { SettingsServer } from './SettingsServer';
 import { paths } from './paths';
 import ResourcePage from '../views/ResourcePage';
@@ -34,7 +34,7 @@ export function AppRoutes(): JSX.Element {
     <Routes>
       <Route path={paths.new} element={<New />} />
       <Route path={paths.themeSettings} element={<SettingsTheme />} />
-      <Route path={paths.agentSettings} element={<SettingsAgent />} />
+      <Route path={paths.agentSettings} element={<SettingsAgentRoute />} />
       <Route path={paths.serverSettings} element={<SettingsServer />} />
       <Route path={paths.shortcuts} element={<Shortcuts />} />
       <Route path={paths.data} element={<Data />} />
diff --git a/data-browser/src/routes/SettingsAgent.tsx b/data-browser/src/routes/SettingsAgent.tsx
index 976a0b50b..dbf1cefa8 100644
--- a/data-browser/src/routes/SettingsAgent.tsx
+++ b/data-browser/src/routes/SettingsAgent.tsx
@@ -1,70 +1,21 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { Agent } from '@tomic/react';
-import { FaCog, FaEye, FaEyeSlash, FaUser } from 'react-icons/fa';
+import { FaUser } from 'react-icons/fa';
 
 import { useSettings } from '../helpers/AppSettings';
-import {
-  InputStyled,
-  InputWrapper,
-  LabelStyled,
-} from '../components/forms/InputStyles';
-import { ButtonInput, Button } from '../components/Button';
+import { LabelStyled } from '../components/forms/InputStyles';
+import { Button } from '../components/Button';
 import { Margin } from '../components/Card';
-import Field from '../components/forms/Field';
 import { ResourceInline } from '../views/ResourceInline';
 import { ContainerNarrow } from '../components/Containers';
-import { AtomicLink } from '../components/AtomicLink';
 import { editURL } from '../helpers/navigation';
-import { useNavigate } from 'react-router';
 import { ErrorLook } from '../components/ErrorLook';
+import { Guard, SettingsAgent } from '../components/Guard';
+import { useNavigate } from 'react-router';
 
-const SettingsAgent: React.FunctionComponent = () => {
+export function SettingsAgentRoute() {
   const { agent, setAgent } = useSettings();
-  const [subject, setSubject] = useState<string | undefined>(undefined);
-  const [privateKey, setPrivateKey] = useState<string | undefined>(undefined);
-  const [error, setError] = useState<Error | undefined>(undefined);
-  const [showPrivateKey, setShowPrivateKey] = useState(false);
-  const [advanced, setAdvanced] = useState(false);
-  const [secret, setSecret] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
 
-  // When there is an agent, set the advanced values
-  // Otherwise, reset the secret value
-  React.useEffect(() => {
-    if (agent !== undefined) {
-      fillAdvanced();
-    } else {
-      setSecret('');
-    }
-  }, [agent]);
-
-  // When the key or subject changes, update the secret
-  React.useEffect(() => {
-    renewSecret();
-  }, [subject, privateKey]);
-
-  function renewSecret() {
-    if (agent) {
-      setSecret(agent.buildSecret());
-    }
-  }
-
-  function fillAdvanced() {
-    try {
-      if (!agent) {
-        throw new Error('No agent set');
-      }
-
-      setSubject(agent.subject);
-      setPrivateKey(agent.privateKey);
-    } catch (e) {
-      const err = new Error('Cannot fill subject and privatekey fields.' + e);
-      setError(err);
-      setSubject('');
-    }
-  }
-
   function handleSignOut() {
     if (
       window.confirm(
@@ -72,76 +23,20 @@ const SettingsAgent: React.FunctionComponent = () => {
       )
     ) {
       setAgent(undefined);
-      setError(undefined);
-      setSubject('');
-      setPrivateKey('');
-    }
-  }
-
-  function setAgentIfChanged(oldAgent: Agent | undefined, newAgent: Agent) {
-    if (JSON.stringify(oldAgent) !== JSON.stringify(newAgent)) {
-      setAgent(newAgent);
-    }
-  }
-
-  /** Called when the secret or the subject is updated manually */
-  async function handleUpdateSubjectAndKey() {
-    renewSecret();
-    setError(undefined);
-
-    try {
-      const newAgent = new Agent(privateKey!, subject);
-      await newAgent.getPublicKey();
-      await newAgent.checkPublicKey();
-
-      setAgentIfChanged(agent, newAgent);
-    } catch (e) {
-      const err = new Error('Invalid Agent' + e);
-      setError(err);
-    }
-  }
-
-  function handleCopy() {
-    secret && navigator.clipboard.writeText(secret);
-  }
-
-  /** When the Secret updates, parse it and try if the */
-  async function handleUpdateSecret(updateSecret: string) {
-    setSecret(updateSecret);
-
-    if (updateSecret === '') {
-      setSecret('');
-      setError(undefined);
-
-      return;
-    }
-
-    setError(undefined);
-
-    try {
-      const newAgent = Agent.fromSecret(updateSecret);
-      setAgentIfChanged(agent, newAgent);
-      setPrivateKey(newAgent.privateKey);
-      setSubject(newAgent.subject);
-      // This will fail and throw if the agent is not public, which is by default
-      // await newAgent.checkPublicKey();
-    } catch (e) {
-      const err = new Error('Invalid secret. ' + e);
-      setError(err);
     }
   }
 
   return (
     <ContainerNarrow>
-      <form>
-        <h1>User Settings</h1>
-        <p>
-          An Agent is a user, consisting of a Subject (its URL) and Private Key.
-          Together, these can be used to edit data and sign Commits.
-        </p>
-        {agent ? (
+      <h1>User Settings</h1>
+      <p>
+        An Agent is a user, consisting of a Subject (its URL) and Private Key.
+        Together, these can be used to edit data and sign Commits.
+      </p>
+      <Guard>
+        {agent && (
           <>
-            {agent.subject?.startsWith('http://localhost') && (
+            {agent?.subject?.startsWith('http://localhost') && (
               <p>
                 <ErrorLook>Warning:</ErrorLook>
                 {
@@ -153,126 +48,24 @@ const SettingsAgent: React.FunctionComponent = () => {
               <FaUser /> You{"'"}re signed in as
             </LabelStyled>
             <p>
-              <ResourceInline subject={agent.subject!} />
+              <ResourceInline subject={agent!.subject!} />
             </p>
-            <Button onClick={() => navigate(editURL(agent.subject!))}>
+            <Button onClick={() => navigate(editURL(agent!.subject!))}>
               Edit profile
             </Button>
             <Margin />
-          </>
-        ) : (
-          <p>
-            You can create your own Agent by hosting an{' '}
-            <AtomicLink href='https://github.com/atomicdata-dev/atomic-data-rust/tree/master/server'>
-              atomic-server
-            </AtomicLink>
-            . Alternatively, you can use{' '}
-            <AtomicLink subject='https://atomicdata.dev/invites'>
-              an Invite
-            </AtomicLink>{' '}
-            to get a guest Agent on someone else{"'s"} Atomic Server.
-          </p>
-        )}
-        <Field
-          label={agent ? 'Agent Secret' : 'Enter your Agent Secret'}
-          helper={
-            "The Agent Secret is a long string of characters that encodes both the Subject and the Private Key. You can think of it as a combined username + password. Store it safely, and don't share it with others."
-          }
-          error={error}
-        >
-          <InputWrapper>
-            <InputStyled
-              value={secret}
-              onChange={e => handleUpdateSecret(e.target.value)}
-              type={showPrivateKey ? 'text' : 'password'}
-              disabled={agent !== undefined}
-              name='secret'
-              id='current-password'
-              autoComplete='current-password'
-              spellCheck='false'
-            />
-            <ButtonInput
-              type='button'
-              title={showPrivateKey ? 'Hide secret' : 'Show secret'}
-              onClick={() => setShowPrivateKey(!showPrivateKey)}
-            >
-              {showPrivateKey ? <FaEyeSlash /> : <FaEye />}
-            </ButtonInput>
-            <ButtonInput
-              type='button'
-              title={advanced ? 'Hide advanced' : 'Show advanced'}
-              onClick={() => setAdvanced(!advanced)}
-            >
-              <FaCog />
-            </ButtonInput>
-            {agent && (
-              <ButtonInput type='button' onClick={handleCopy}>
-                copy
-              </ButtonInput>
-            )}
-          </InputWrapper>
-        </Field>
-        {advanced ? (
-          <React.Fragment>
-            <Field
-              label='Subject URL'
-              helper={
-                'The link to your Agent, e.g. https://atomicdata.dev/agents/someAgent'
-              }
+            <SettingsAgent />
+            <Button
+              subtle
+              title='Sign out with current Agent and reset this form'
+              onClick={handleSignOut}
+              data-test='sign-out'
             >
-              <InputWrapper>
-                <InputStyled
-                  disabled={agent !== undefined}
-                  value={subject}
-                  onChange={e => {
-                    setSubject(e.target.value);
-                    handleUpdateSubjectAndKey();
-                  }}
-                />
-              </InputWrapper>
-            </Field>
-            <Field
-              label='Private Key'
-              helper={
-                'The private key of the Agent, which is a Base64 encoded string.'
-              }
-            >
-              <InputWrapper>
-                <InputStyled
-                  disabled={agent !== undefined}
-                  type={showPrivateKey ? 'text' : 'password'}
-                  value={privateKey}
-                  onChange={e => {
-                    setPrivateKey(e.target.value);
-                    handleUpdateSubjectAndKey();
-                  }}
-                />
-                <ButtonInput
-                  type='button'
-                  title={
-                    showPrivateKey ? 'Hide private key' : 'Show private key'
-                  }
-                  onClick={() => setShowPrivateKey(!showPrivateKey)}
-                >
-                  {showPrivateKey ? <FaEyeSlash /> : <FaEye />}
-                </ButtonInput>
-              </InputWrapper>
-            </Field>
-          </React.Fragment>
-        ) : null}
-        {agent && (
-          <Button
-            subtle
-            title='Sign out with current Agent and reset this form'
-            onClick={handleSignOut}
-            data-test='sign-out'
-          >
-            sign out
-          </Button>
+              sign out
+            </Button>
+          </>
         )}
-      </form>
+      </Guard>
     </ContainerNarrow>
   );
-};
-
-export default SettingsAgent;
+}
diff --git a/data-browser/src/views/ChatRoomPage.tsx b/data-browser/src/views/ChatRoomPage.tsx
index e16e8eb9f..46c425ec1 100644
--- a/data-browser/src/views/ChatRoomPage.tsx
+++ b/data-browser/src/views/ChatRoomPage.tsx
@@ -21,6 +21,7 @@ import { CommitDetail } from '../components/CommitDetail';
 import Markdown from '../components/datatypes/Markdown';
 import { Detail } from '../components/Detail';
 import { EditableTitle } from '../components/EditableTitle';
+import { Guard } from '../components/Guard';
 import { editURL } from '../helpers/navigation';
 import { ResourceInline } from './ResourceInline';
 import { ResourcePageProps } from './ResourcePage';
@@ -161,25 +162,27 @@ export function ChatRoomPage({ resource }: ResourcePageProps) {
           </Button>
         </Detail>
       )}
-      <MessageForm onSubmit={sendMessage}>
-        <MessageInput
-          rows={textAreaHight}
-          ref={inputRef}
-          autoFocus
-          value={newMessageVal}
-          onChange={handleChangeMessageText}
-          placeholder={'type a message'}
-          data-test='message-input'
-        />
-        <SendButton
-          title='Send message [enter]'
-          disabled={disableSend}
-          clean
-          onClick={sendMessage}
-        >
-          Send
-        </SendButton>
-      </MessageForm>
+      <Guard>
+        <MessageForm onSubmit={sendMessage}>
+          <MessageInput
+            rows={textAreaHight}
+            ref={inputRef}
+            autoFocus
+            value={newMessageVal}
+            onChange={handleChangeMessageText}
+            placeholder={'type a message'}
+            data-test='message-input'
+          />
+          <SendButton
+            title='Send message [enter]'
+            disabled={disableSend}
+            clean
+            onClick={sendMessage}
+          >
+            Send
+          </SendButton>
+        </MessageForm>
+      </Guard>
     </FullPageWrapper>
   );
 }
diff --git a/data-browser/src/views/ErrorPage.tsx b/data-browser/src/views/ErrorPage.tsx
index ec24136ee..dd7900598 100644
--- a/data-browser/src/views/ErrorPage.tsx
+++ b/data-browser/src/views/ErrorPage.tsx
@@ -3,11 +3,11 @@ import { isUnauthorized, useStore } from '@tomic/react';
 import { ContainerNarrow } from '../components/Containers';
 import { ErrorLook } from '../components/ErrorLook';
 import { Button } from '../components/Button';
-import { SignInButton } from '../components/SignInButton';
 import { useSettings } from '../helpers/AppSettings';
 import { ResourcePageProps } from './ResourcePage';
 import { Row } from '../components/Row';
 import CrashPage from './CrashPage';
+import { Guard } from '../components/Guard';
 
 /**
  * A View for Resource Errors. Not to be confused with the CrashPage, which is
@@ -18,6 +18,11 @@ function ErrorPage({ resource }: ResourcePageProps): JSX.Element {
   const store = useStore();
   const subject = resource.getSubject();
 
+  React.useEffect(() => {
+    // Try again when agent changes
+    store.fetchResource(subject);
+  }, [agent]);
+
   if (isUnauthorized(resource.error)) {
     return (
       <ContainerNarrow>
@@ -30,7 +35,7 @@ function ErrorPage({ resource }: ResourcePageProps): JSX.Element {
         ) : (
           <>
             <p>{"You don't have access to this, try signing in:"}</p>
-            <SignInButton />
+            <Guard />
           </>
         )}
       </ContainerNarrow>
diff --git a/lib/src/authentication.ts b/lib/src/authentication.ts
index 2d3640e10..f09eed511 100644
--- a/lib/src/authentication.ts
+++ b/lib/src/authentication.ts
@@ -53,7 +53,6 @@ export async function signRequest(
   agent: Agent,
   headers: HeadersObject | Headers,
 ): Promise<HeadersObject> {
-  console.log('sign request', subject);
   const timestamp = getTimestampNow();
 
   if (agent?.subject && !localTryingExternal(subject, agent)) {
diff --git a/react/src/index.ts b/react/src/index.ts
index e264d8b90..cdb379771 100644
--- a/react/src/index.ts
+++ b/react/src/index.ts
@@ -30,4 +30,5 @@ export * from './useImporter';
 export * from './useLocalStorage';
 export * from './useMarkdown';
 export * from './useServerSearch';
+export * from './useRegister';
 export * from '@tomic/lib';
diff --git a/react/src/useRegister.ts b/react/src/useRegister.ts
new file mode 100644
index 000000000..a53d89aa4
--- /dev/null
+++ b/react/src/useRegister.ts
@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { Agent, generateKeyPair, properties, useStore } from '.';
+
+/** Only allows lowercase chars and numbers  */
+export const nameRegex = '^[a-z0-9_-]+';
+
+interface RegisterResult {
+  agent: Agent;
+  driveURL: string;
+}
+
+// Allow users to register and create a drive on the `/register` route.
+export function useRegister(): (userName: string) => Promise<RegisterResult> {
+  const store = useStore();
+
+  const register = useCallback(
+    /** Returns redirect URL of new drie on success */
+    async (name: string): Promise<RegisterResult> => {
+      const keypair = await generateKeyPair();
+      const newAgent = new Agent(keypair.privateKey);
+      const publicKey = await newAgent.getPublicKey();
+      const url = new URL('/register', store.getServerUrl());
+      url.searchParams.set('name', name);
+      url.searchParams.set('public-key', publicKey);
+      const resource = await store.getResourceAsync(url.toString());
+      const destination = resource.get(
+        properties.redirect.destination,
+      ) as string;
+      const agentSubject = resource.get(
+        properties.redirect.redirectAgent,
+      ) as string;
+
+      if (resource.error) {
+        throw resource.error;
+      }
+
+      if (!destination) {
+        throw new Error('No redirect destination');
+      }
+
+      if (!agentSubject) {
+        throw new Error('No agent returned');
+      }
+
+      newAgent.subject = agentSubject;
+
+      store.setAgent(newAgent);
+
+      return { driveURL: destination, agent: newAgent };
+    },
+    [],
+  );
+
+  return register;
+}