Fediverse-based authentication (#1846)

* Able to authenticate user against IndieAuth. For #1273

* WIP server indieauth endpoint. For https://github.com/owncast/owncast/issues/1272

* Add migration to remove access tokens from user

* Add authenticated bool to user for display purposes

* Add indieauth modal and auth flair to display names. For #1273

* Validate URLs and display errors

* Renames, cleanups

* Handle relative auth endpoint paths. Add error handling for missing redirects.

* Disallow using display names in use by registered users. Closes #1810

* Verify code verifier via code challenge on callback

* Use relative path to authorization_endpoint

* Post-rebase fixes

* Use a timestamp instead of a bool for authenticated

* Propertly handle and display error in modal

* Use auth'ed timestamp to derive authenticated flag to display in chat

* Fediverse chat auth via OTP

* Increase validity time just in case

* Add fediverse auth into auth modal

* Text, validation, cleanup updates for fedi auth

* Fix typo

* Remove unused images

* Remove unused file

* Add chat display name to auth modal text

webroot/js/components/chat-settings-modal.js

@@ -2,6 +2,7 @@ import { h, Component } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 import TabBar from './tab-bar.js';
 import IndieAuthForm from './auth-indieauth.js';
+import FediverseAuth from './auth-fediverse.js';
 
 const html = htm.bind(h);
 
@@ -10,13 +11,14 @@ export default class ChatSettingsModal extends Component {
     const {
       accessToken,
       authenticated,
+      federationEnabled,
       username,
-      onUsernameChange,
       indieAuthEnabled,
     } = this.props;
 
-    const TAB_CONTENT = [
-      {
+    const TAB_CONTENT = [];
+    if (indieAuthEnabled) {
+      TAB_CONTENT.push({
         label: html`<span style=${{ display: 'flex', alignItems: 'center' }}
           ><img
             style=${{
@@ -31,13 +33,40 @@ export default class ChatSettingsModal extends Component {
         content: html`<${IndieAuthForm}}
           accessToken=${accessToken}
           authenticated=${authenticated}
+          username=${username}
         />`,
-      },
-    ];
+      });
+    }
+
+    if (federationEnabled) {
+      TAB_CONTENT.push({
+        label: html`<span style=${{ display: 'flex', alignItems: 'center' }}
+          ><img
+            style=${{
+              display: 'inline',
+              height: '0.8em',
+              marginRight: '5px',
+            }}
+            src="/img/fediverse-black.png"
+          />
+          FediAuth</span
+        >`,
+        content: html`<${FediverseAuth}}
+          authenticated=${authenticated}
+          accessToken=${accessToken}
+          authenticated=${authenticated}
+          username=${username}
+        />`,
+      });
+    }
 
     return html`
       <div class="bg-gray-100 bg-center bg-no-repeat p-5">
         <${TabBar} tabs=${TAB_CONTENT} ariaLabel="Chat settings" />
+        <p class="mt-4">
+          <b>Note:</b> This is for authentication purposes only, and no personal
+          information will be accessed or stored.
+        </p>
       </div>
     `;
   }