IndieAuth support (#1811)
* 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 * don't redirect unless a URL is present avoids redirecting to `undefined` if there was an error * improve error message if owncast server URL isn't set * fix IndieAuth PKCE implementation use SHA256 instead of SHA1, generates a longer code verifier (must be 43-128 chars long), fixes URL-safe SHA256 encoding * return real profile data for IndieAuth response * check the code verifier in the IndieAuth server * Linting * Add new chat settings modal anad split up indieauth ui * Remove logging error * Update the IndieAuth modal UI. For #1273 * Add IndieAuth repsonse error checking * Disable IndieAuth client if server URL is not set. * Add explicit error messages for specific error types * Fix bad logic * Return OAuth-keyed error responses for indieauth server * Display IndieAuth error in plain text with link to return to main page * Remove redundant check * Add additional detail to error * Hide IndieAuth details behind disclosure details * Break out migration into two steps because some people have been runing dev in production * Add auth option to user dropdown Co-authored-by: Aaron Parecki <aaron@parecki.com>
This commit is contained in:
Gabe Kangas
@@ -27,6 +27,8 @@ import FediverseFollowModal, {
|
||||
|
||||
import { NotifyButton, NotifyModal } from './components/notification.js';
|
||||
import { isPushNotificationSupported } from './notification/registerWeb.js';
|
||||
import ChatSettingsModal from './components/chat-settings-modal.js';
|
||||
|
||||
import {
|
||||
addNewlines,
|
||||
checkUrlPathForDisplay,
|
||||
@@ -110,6 +112,9 @@ export default class App extends Component {
|
||||
externalActionModalData: null,
|
||||
fediverseModalData: null,
|
||||
|
||||
// authentication options
|
||||
indieAuthEnabled: false,
|
||||
|
||||
// routing & tabbing
|
||||
section: '',
|
||||
sectionId: '',
|
||||
@@ -144,6 +149,8 @@ export default class App extends Component {
|
||||
this.closeFediverseFollowModal = this.closeFediverseFollowModal.bind(this);
|
||||
this.displayNotificationModal = this.displayNotificationModal.bind(this);
|
||||
this.closeNotificationModal = this.closeNotificationModal.bind(this);
|
||||
this.showAuthModal = this.showAuthModal.bind(this);
|
||||
this.closeAuthModal = this.closeAuthModal.bind(this);
|
||||
|
||||
// player events
|
||||
this.handlePlayerReady = this.handlePlayerReady.bind(this);
|
||||
@@ -268,8 +275,14 @@ export default class App extends Component {
|
||||
}
|
||||
|
||||
setConfigData(data = {}) {
|
||||
const { name, summary, chatDisabled, socketHostOverride, notifications } =
|
||||
data;
|
||||
const {
|
||||
name,
|
||||
summary,
|
||||
chatDisabled,
|
||||
socketHostOverride,
|
||||
notifications,
|
||||
authentication,
|
||||
} = data;
|
||||
window.document.title = name;
|
||||
|
||||
this.socketHostOverride = socketHostOverride;
|
||||
@@ -281,10 +294,12 @@ export default class App extends Component {
|
||||
}
|
||||
|
||||
this.hasConfiguredChat = true;
|
||||
const { indieAuthEnabled } = authentication;
|
||||
|
||||
this.setState({
|
||||
canChat: !chatDisabled,
|
||||
notifications,
|
||||
indieAuthEnabled,
|
||||
configData: {
|
||||
...data,
|
||||
summary: summary && addNewlines(summary),
|
||||
@@ -618,6 +633,17 @@ export default class App extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
showAuthModal() {
|
||||
const data = {
|
||||
title: 'Chat',
|
||||
};
|
||||
this.setState({ authModalData: data });
|
||||
}
|
||||
|
||||
closeAuthModal() {
|
||||
this.setState({ authModalData: null });
|
||||
}
|
||||
|
||||
handleWebsocketMessage(e) {
|
||||
if (e.type === SOCKET_MESSAGE_TYPES.ERROR_USER_DISABLED) {
|
||||
// User has been actively disabled on the backend. Turn off chat for them.
|
||||
@@ -637,10 +663,10 @@ export default class App extends Component {
|
||||
// When connected the user will return an event letting us know what our
|
||||
// user details are so we can display them properly.
|
||||
const { user } = e;
|
||||
const { displayName } = user;
|
||||
|
||||
const { displayName, authenticated } = user;
|
||||
this.setState({
|
||||
username: displayName,
|
||||
authenticated,
|
||||
isModerator: checkIsModerator(e),
|
||||
});
|
||||
}
|
||||
@@ -724,17 +750,20 @@ export default class App extends Component {
|
||||
streamTitle,
|
||||
touchKeyboardActive,
|
||||
username,
|
||||
authenticated,
|
||||
viewerCount,
|
||||
websocket,
|
||||
windowHeight,
|
||||
windowWidth,
|
||||
fediverseModalData,
|
||||
authModalData,
|
||||
externalActionModalData,
|
||||
notificationModalData,
|
||||
notifications,
|
||||
lastDisconnectTime,
|
||||
section,
|
||||
sectionId,
|
||||
indieAuthEnabled,
|
||||
} = state;
|
||||
|
||||
const {
|
||||
@@ -864,11 +893,32 @@ export default class App extends Component {
|
||||
/>`}
|
||||
/>`;
|
||||
|
||||
const authModal =
|
||||
authModalData &&
|
||||
html`
|
||||
<${ExternalActionModal}
|
||||
onClose=${this.closeAuthModal}
|
||||
action=${authModalData}
|
||||
useIframe=${false}
|
||||
customContent=${html`<${ChatSettingsModal}
|
||||
name=${name}
|
||||
logo=${logo}
|
||||
onUsernameChange=${this.handleUsernameChange}
|
||||
username=${username}
|
||||
accessToken=${this.state.accessToken}
|
||||
authenticated=${authenticated}
|
||||
onClose=${this.closeAuthModal}
|
||||
indieAuthEnabled=${indieAuthEnabled}
|
||||
/>`}
|
||||
/>
|
||||
`;
|
||||
|
||||
const chat = this.state.websocket
|
||||
? html`
|
||||
<${Chat}
|
||||
websocket=${websocket}
|
||||
username=${username}
|
||||
authenticated=${authenticated}
|
||||
chatInputEnabled=${chatInputEnabled && !chatDisabled}
|
||||
instanceTitle=${name}
|
||||
accessToken=${accessToken}
|
||||
@@ -911,6 +961,8 @@ export default class App extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
const authIcon = '/img/user-settings.svg';
|
||||
|
||||
return html`
|
||||
<div
|
||||
id="app-container"
|
||||
@@ -942,9 +994,11 @@ export default class App extends Component {
|
||||
>
|
||||
</h1>
|
||||
|
||||
<${ChatMenu} username=${username} isModerator=${isModerator} onUsernameChange=${
|
||||
this.handleUsernameChange
|
||||
} onFocus=${this.handleFormFocus} onBlur=${
|
||||
<${ChatMenu} username=${username} isModerator=${isModerator} showAuthModal=${
|
||||
indieAuthEnabled && this.showAuthModal
|
||||
} onUsernameChange=${this.handleUsernameChange} onFocus=${
|
||||
this.handleFormFocus
|
||||
} onBlur=${
|
||||
this.handleFormBlur
|
||||
} chatDisabled=${chatDisabled} noVideoContent=${noVideoContent} handleChatPanelToggle=${
|
||||
this.handleChatPanelToggle
|
||||
@@ -1027,7 +1081,7 @@ export default class App extends Component {
|
||||
</footer>
|
||||
|
||||
${chat} ${externalActionModal} ${fediverseFollowModal}
|
||||
${notificationModal}
|
||||
${notificationModal} ${authModal}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
3
webroot/js/chat/indieauth.js
Normal file
3
webroot/js/chat/indieauth.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import { URL_CHAT_INDIEAUTH_BEGIN } from '../utils/constants.js';
|
||||
|
||||
export async function beginIndieAuthFlow() {}
|
||||
192
webroot/js/components/auth-indieauth.js
Normal file
192
webroot/js/components/auth-indieauth.js
Normal file
@@ -0,0 +1,192 @@
|
||||
import { h, Component } from '/js/web_modules/preact.js';
|
||||
import htm from '/js/web_modules/htm.js';
|
||||
const html = htm.bind(h);
|
||||
|
||||
export default class IndieAuthForm extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.submitButtonPressed = this.submitButtonPressed.bind(this);
|
||||
|
||||
this.state = {
|
||||
errorMessage: null,
|
||||
loading: false,
|
||||
valid: false,
|
||||
};
|
||||
}
|
||||
|
||||
async submitButtonPressed() {
|
||||
const { accessToken, authenticated } = this.props;
|
||||
const { host, valid } = this.state;
|
||||
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = `/api/auth/indieauth?accessToken=${accessToken}`;
|
||||
const data = { authHost: host };
|
||||
|
||||
this.setState({ loading: true });
|
||||
|
||||
try {
|
||||
const rawResponse = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
const content = await rawResponse.json();
|
||||
if (content.message) {
|
||||
this.setState({ errorMessage: content.message, loading: false });
|
||||
return;
|
||||
} else if (!content.redirect) {
|
||||
this.setState({
|
||||
errorMessage: 'Auth provider did not return a redirect URL.',
|
||||
loading: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (content.redirect) {
|
||||
const redirect = content.redirect;
|
||||
window.location = redirect;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.setState({ errorMessage: e, loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
onInput = (e) => {
|
||||
const { value } = e.target;
|
||||
let valid = validateURL(value);
|
||||
this.setState({ host: value, valid });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { errorMessage, loading, host, valid } = this.state;
|
||||
const { authenticated } = this.props;
|
||||
const buttonState = valid ? '' : 'cursor-not-allowed opacity-50';
|
||||
const loaderStyle = loading ? 'flex' : 'none';
|
||||
|
||||
const message = !authenticated
|
||||
? `While you can chat completely anonymously you can also add
|
||||
authentication so you can rejoin with the same chat persona from any
|
||||
device or browser.`
|
||||
: html`<span
|
||||
><b>You are already authenticated</b>. However, you can add other
|
||||
external sites or log in as a different user.</span
|
||||
>`;
|
||||
|
||||
let errorMessageText = errorMessage;
|
||||
if (!!errorMessageText) {
|
||||
if (errorMessageText.includes('url does not support indieauth')) {
|
||||
errorMessageText =
|
||||
'The provided URL is either invalid or does not support IndieAuth.';
|
||||
}
|
||||
}
|
||||
|
||||
const error = errorMessage
|
||||
? html` <div
|
||||
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<div class="font-bold mb-2">There was an error.</div>
|
||||
<div class="block mt-2">
|
||||
<div>${errorMessageText}</div>
|
||||
</div>
|
||||
</div>`
|
||||
: null;
|
||||
|
||||
return html` <div>
|
||||
<p class="text-gray-700">${message}</p>
|
||||
|
||||
<p>${error}</p>
|
||||
|
||||
<div class="mb34">
|
||||
<label
|
||||
class="block text-gray-700 text-sm font-semibold mt-6"
|
||||
for="username"
|
||||
>
|
||||
Your domain
|
||||
</label>
|
||||
<input
|
||||
onInput=${this.onInput}
|
||||
type="url"
|
||||
value=${host}
|
||||
class="border bg-white rounded w-full py-2 px-3 mb-2 mt-2 text-indigo-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="https://yoursite.com"
|
||||
/>
|
||||
<button
|
||||
class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 mt-6 px-4 rounded focus:outline-none focus:shadow-outline ${buttonState}"
|
||||
type="button"
|
||||
onClick=${this.submitButtonPressed}
|
||||
>
|
||||
Authenticate with your domain
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="mt-4">
|
||||
<details>
|
||||
<summary class="cursor-pointer">
|
||||
Learn more about <span class="text-blue-500">IndieAuth</span>
|
||||
</summary>
|
||||
<div class="inline">
|
||||
<p class="mt-4">
|
||||
IndieAuth allows for a completely independent and decentralized
|
||||
way of identifying yourself using your own domain.
|
||||
</p>
|
||||
|
||||
<p class="mt-4">
|
||||
If you run an Owncast instance, you can use that domain here.
|
||||
Otherwise, ${' '}
|
||||
<a class="underline" href="https://indieauth.net/#providers"
|
||||
>learn more about how you can support IndieAuth</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</p>
|
||||
|
||||
<p class="mt-4">
|
||||
<b>Note:</b> This is for authentication purposes only, and no personal
|
||||
information will be accessed or stored.
|
||||
</p>
|
||||
|
||||
<div
|
||||
id="follow-loading-spinner-container"
|
||||
style="display: ${loaderStyle}"
|
||||
>
|
||||
<img id="follow-loading-spinner" src="/img/loading.gif" />
|
||||
<p class="text-gray-700 text-lg">Authenticating.</p>
|
||||
<p class="text-gray-600 text-lg">Please wait...</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function validateURL(url) {
|
||||
if (!url) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const u = new URL(url);
|
||||
if (!u) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (u.protocol !== 'https:') {
|
||||
return false;
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
44
webroot/js/components/chat-settings-modal.js
Normal file
44
webroot/js/components/chat-settings-modal.js
Normal file
@@ -0,0 +1,44 @@
|
||||
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';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
export default class ChatSettingsModal extends Component {
|
||||
render() {
|
||||
const {
|
||||
accessToken,
|
||||
authenticated,
|
||||
username,
|
||||
onUsernameChange,
|
||||
indieAuthEnabled,
|
||||
} = this.props;
|
||||
|
||||
const TAB_CONTENT = [
|
||||
{
|
||||
label: html`<span style=${{ display: 'flex', alignItems: 'center' }}
|
||||
><img
|
||||
style=${{
|
||||
display: 'inline',
|
||||
height: '0.8em',
|
||||
marginRight: '5px',
|
||||
}}
|
||||
src="/img/indieauth.png"
|
||||
/>
|
||||
IndieAuth</span
|
||||
>`,
|
||||
content: html`<${IndieAuthForm}}
|
||||
accessToken=${accessToken}
|
||||
authenticated=${authenticated}
|
||||
/>`,
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<div class="bg-gray-100 bg-center bg-no-repeat p-5">
|
||||
<${TabBar} tabs=${TAB_CONTENT} ariaLabel="Chat settings" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ export const ChatMenu = (props) => {
|
||||
noVideoContent,
|
||||
handleChatPanelToggle,
|
||||
onUsernameChange,
|
||||
showAuthModal,
|
||||
onFocus,
|
||||
onBlur,
|
||||
} = props;
|
||||
@@ -34,6 +35,15 @@ export const ChatMenu = (props) => {
|
||||
if (chatMenuOpen) setView('main');
|
||||
}, [chatMenuOpen]);
|
||||
|
||||
const authMenuItem =
|
||||
showAuthModal &&
|
||||
html`<li>
|
||||
<button type="button" id="chat-auth" onClick=${showAuthModal}>
|
||||
Authenticate
|
||||
<span><${ChatIcon} /></span>
|
||||
</button>
|
||||
</li>`;
|
||||
|
||||
return html`
|
||||
<${Context.Provider} value=${props}>
|
||||
<div class="chat-menu p-2 relative shadow-lg" ref=${chatMenuRef}>
|
||||
@@ -55,7 +65,7 @@ export const ChatMenu = (props) => {
|
||||
>
|
||||
${username}
|
||||
</span>
|
||||
<${CaretDownIcon} className="w-8 h-8"/>
|
||||
<${CaretDownIcon} className="w-8 h-8"/>
|
||||
</button>
|
||||
${
|
||||
chatMenuOpen &&
|
||||
@@ -74,6 +84,7 @@ export const ChatMenu = (props) => {
|
||||
onBlur=${onBlur}
|
||||
/>
|
||||
</li>
|
||||
${authMenuItem}
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -49,7 +49,8 @@ export default class ChatMessageView extends Component {
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
const { displayName, displayColor, createdAt, isBot } = user;
|
||||
|
||||
const { displayName, displayColor, createdAt, isBot, authenticated } = user;
|
||||
const isAuthorModerator = checkIsModerator(message);
|
||||
|
||||
const isMessageModeratable =
|
||||
@@ -78,7 +79,7 @@ export default class ChatMessageView extends Component {
|
||||
isMessageModeratable ? 'moderatable' : ''
|
||||
}`;
|
||||
|
||||
const messageAuthorFlair = isAuthorModerator
|
||||
const isModeratorFlair = isAuthorModerator
|
||||
? html`<img
|
||||
class="flair"
|
||||
title="Moderator"
|
||||
@@ -95,6 +96,14 @@ export default class ChatMessageView extends Component {
|
||||
/>`
|
||||
: null;
|
||||
|
||||
const authorAuthenticatedFlair = authenticated
|
||||
? html`<img
|
||||
class="flair"
|
||||
title="Authenticated"
|
||||
src="/img/authenticated.svg"
|
||||
/>`
|
||||
: null;
|
||||
|
||||
return html`
|
||||
<div
|
||||
style=${backgroundStyle}
|
||||
@@ -107,7 +116,8 @@ export default class ChatMessageView extends Component {
|
||||
class="message-author font-bold"
|
||||
title=${userMetadata}
|
||||
>
|
||||
${isBotFlair} ${messageAuthorFlair} ${displayName}
|
||||
${isBotFlair} ${authorAuthenticatedFlair} ${isModeratorFlair}
|
||||
${displayName}
|
||||
</div>
|
||||
${isMessageModeratable &&
|
||||
html`<${ModeratorActions}
|
||||
|
||||
@@ -102,6 +102,10 @@ export default class UsernameForm extends Component {
|
||||
},
|
||||
};
|
||||
|
||||
const moderatorFlag = html`
|
||||
<img src="/img/moderator-nobackground.svg" class="moderator-flag" />
|
||||
`;
|
||||
|
||||
return html`
|
||||
<div id="user-info">
|
||||
<button
|
||||
|
||||
@@ -21,6 +21,7 @@ export const URL_PLAYBACK_METRICS = `/api/metrics/playback`;
|
||||
|
||||
export const URL_REGISTER_NOTIFICATION = `/api/notifications/register`;
|
||||
export const URL_REGISTER_EMAIL_NOTIFICATION = `/api/notifications/register/email`;
|
||||
export const URL_CHAT_INDIEAUTH_BEGIN = `/api/auth/indieauth`;
|
||||
|
||||
export const TIMER_STATUS_UPDATE = 5000; // ms
|
||||
export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
|
||||
|
||||
Reference in New Issue
Block a user