From d5847e2d2b68a1eb41d43be170cd4ddff9003cff Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Mon, 17 Mar 2025 15:06:17 +0100 Subject: [feature] Application creation + management via API + settings panel (#3906) * [feature] Application creation + management via API + settings panel * fix docs links * add errnorows test * use known application as shorter * add comment about side effects --- .../settings/lib/query/admin/custom-emoji/index.ts | 6 +- .../lib/query/admin/domain-permissions/export.ts | 2 +- web/source/settings/lib/query/gts-api.ts | 3 +- web/source/settings/lib/query/login/index.ts | 198 ++++++++++++++++++++ web/source/settings/lib/query/oauth/index.ts | 205 --------------------- web/source/settings/lib/query/user/applications.ts | 146 +++++++++++++++ 6 files changed, 350 insertions(+), 210 deletions(-) create mode 100644 web/source/settings/lib/query/login/index.ts delete mode 100644 web/source/settings/lib/query/oauth/index.ts create mode 100644 web/source/settings/lib/query/user/applications.ts (limited to 'web/source/settings/lib/query') diff --git a/web/source/settings/lib/query/admin/custom-emoji/index.ts b/web/source/settings/lib/query/admin/custom-emoji/index.ts index 56684f03b..c5dd0a814 100644 --- a/web/source/settings/lib/query/admin/custom-emoji/index.ts +++ b/web/source/settings/lib/query/admin/custom-emoji/index.ts @@ -141,7 +141,7 @@ const extended = gtsApi.injectEndpoints({ searchItemForEmoji: build.mutation({ async queryFn(url, api, _extraOpts, fetchWithBQ) { const state = api.getState() as RootState; - const oauthState = state.oauth; + const loginState = state.login; // First search for given url. const searchRes = await fetchWithBQ({ @@ -161,8 +161,8 @@ const extended = gtsApi.injectEndpoints({ // Ensure emojis domain is not OUR domain. If it // is, we already have the emojis by definition. - if (oauthState.instanceUrl !== undefined) { - if (domain == new URL(oauthState.instanceUrl).host) { + if (loginState.instanceUrl !== undefined) { + if (domain == new URL(loginState.instanceUrl).host) { throw "LOCAL_INSTANCE"; } } diff --git a/web/source/settings/lib/query/admin/domain-permissions/export.ts b/web/source/settings/lib/query/admin/domain-permissions/export.ts index 868e3f7a4..f258991c6 100644 --- a/web/source/settings/lib/query/admin/domain-permissions/export.ts +++ b/web/source/settings/lib/query/admin/domain-permissions/export.ts @@ -116,7 +116,7 @@ const extended = gtsApi.injectEndpoints({ // Parse filename to something like: // `example.org-blocklist-2023-10-09.json`. const state = api.getState() as RootState; - const instanceUrl = state.oauth.instanceUrl?? "unknown"; + const instanceUrl = state.login.instanceUrl?? "unknown"; const domain = new URL(instanceUrl).host; const date = new Date(); const filename = [ diff --git a/web/source/settings/lib/query/gts-api.ts b/web/source/settings/lib/query/gts-api.ts index 401423766..540191132 100644 --- a/web/source/settings/lib/query/gts-api.ts +++ b/web/source/settings/lib/query/gts-api.ts @@ -77,7 +77,7 @@ const gtsBaseQuery: BaseQueryFn< // Retrieve state at the moment // this function was called. const state = api.getState() as RootState; - const { instanceUrl, token } = state.oauth; + const { instanceUrl, token } = state.login; // Derive baseUrl dynamically. let baseUrl: string | undefined; @@ -160,6 +160,7 @@ export const gtsApi = createApi({ reducerPath: "api", baseQuery: gtsBaseQuery, tagTypes: [ + "Application", "Auth", "Emoji", "Report", diff --git a/web/source/settings/lib/query/login/index.ts b/web/source/settings/lib/query/login/index.ts new file mode 100644 index 000000000..e3b3b94a1 --- /dev/null +++ b/web/source/settings/lib/query/login/index.ts @@ -0,0 +1,198 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'; + +import { gtsApi } from "../gts-api"; +import { + setToken as oauthSetToken, + remove as oauthRemove, + authorize as oauthAuthorize, +} from "../../../redux/login"; +import { RootState } from '../../../redux/store'; +import { Account } from '../../types/account'; +import { OAuthAccessTokenRequestBody } from '../../types/oauth'; + +function getSettingsURL() { + /* + needed in case the settings interface isn't hosted at /settings but + some subpath like /gotosocial/settings. Other parts of the code don't + take this into account yet so mostly future-proofing. + + Also drops anything past /settings/, because authorization urls that are too long + get rejected by GTS. + */ + const [pre, _past] = window.location.pathname.split("/settings"); + return `${window.location.origin}${pre}/settings`; +} + +const SETTINGS_URL = (getSettingsURL()); + +// Couple auth functions here require multiple requests as +// part of an OAuth token 'flow'. To keep things simple for +// callers of these query functions, the multiple requests +// are chained within one query. +// +// https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query +const extended = gtsApi.injectEndpoints({ + endpoints: (build) => ({ + verifyCredentials: build.query({ + providesTags: (_res, error) => + error == undefined ? ["Auth"] : [], + async queryFn(_arg, api, _extraOpts, fetchWithBQ) { + const state = api.getState() as RootState; + const loginState = state.login; + + // If we're not in the middle of an auth/callback, + // we may already have an auth token, so just + // return a standard verify_credentials query. + if (loginState.current != 'awaitingcallback') { + return fetchWithBQ({ + url: `/api/v1/accounts/verify_credentials` + }); + } + + // We're in the middle of an auth/callback flow. + // Try to retrieve callback code from URL query. + const urlParams = new URLSearchParams(window.location.search); + const code = urlParams.get("code"); + if (code == undefined) { + return { + error: { + status: 400, + statusText: 'Bad Request', + data: {"error":"Waiting for callback, but no ?code= provided in url."}, + }, + }; + } + + // Retrieve app with which the + // callback code was generated. + const app = loginState.app; + if (app == undefined || app.client_id == undefined) { + return { + error: { + status: 400, + statusText: 'Bad Request', + data: {"error":"No stored app registration data, can't finish login flow."}, + }, + }; + } + + // Use the provided code and app + // secret to request an auth token. + const tokenReqBody: OAuthAccessTokenRequestBody = { + client_id: app.client_id, + client_secret: app.client_secret, + redirect_uri: SETTINGS_URL, + grant_type: "authorization_code", + code: code + }; + + const tokenResult = await fetchWithBQ({ + method: "POST", + url: "/oauth/token", + body: tokenReqBody, + }); + if (tokenResult.error) { + return { error: tokenResult.error as FetchBaseQueryError }; + } + + // Remove ?code= query param from + // url, we don't want it anymore. + window.history.replaceState({}, document.title, window.location.pathname); + + // Store returned token in redux. + api.dispatch(oauthSetToken(tokenResult.data)); + + // We're now authed! So return + // standard verify_credentials query. + return fetchWithBQ({ + url: `/api/v1/accounts/verify_credentials` + }); + } + }), + + authorizeFlow: build.mutation({ + async queryFn(formData, api, _extraOpts, fetchWithBQ) { + const state = api.getState() as RootState; + const loginState = state.login; + + let instanceUrl: string; + if (!formData.instance.startsWith("http")) { + formData.instance = `https://${formData.instance}`; + } + + instanceUrl = new URL(formData.instance).origin; + if (loginState?.instanceUrl == instanceUrl && loginState.app) { + return { data: loginState.app }; + } + + const appResult = await fetchWithBQ({ + method: "POST", + baseUrl: instanceUrl, + url: "/api/v1/apps", + body: { + client_name: "GoToSocial Settings", + scopes: formData.scopes, + redirect_uris: SETTINGS_URL, + website: SETTINGS_URL + } + }); + if (appResult.error) { + return { error: appResult.error as FetchBaseQueryError }; + } + + const app = appResult.data as any; + + app.scopes = formData.scopes; + api.dispatch(oauthAuthorize({ + instanceUrl: instanceUrl, + app: app, + current: "awaitingcallback", + expectingRedirect: true + })); + + const url = new URL(instanceUrl); + url.pathname = "/oauth/authorize"; + url.searchParams.set("client_id", app.client_id); + url.searchParams.set("redirect_uri", SETTINGS_URL); + url.searchParams.set("response_type", "code"); + url.searchParams.set("scope", app.scopes); + + const redirectURL = url.toString(); + window.location.assign(redirectURL); + return { data: null }; + }, + }), + logout: build.mutation({ + queryFn: (_arg, api) => { + api.dispatch(oauthRemove()); + return { data: null }; + }, + invalidatesTags: ["Auth"] + }) + }) +}); + +export const { + useVerifyCredentialsQuery, + useAuthorizeFlowMutation, + useLogoutMutation, +} = extended; diff --git a/web/source/settings/lib/query/oauth/index.ts b/web/source/settings/lib/query/oauth/index.ts deleted file mode 100644 index e151b0aee..000000000 --- a/web/source/settings/lib/query/oauth/index.ts +++ /dev/null @@ -1,205 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'; - -import { gtsApi } from "../gts-api"; -import { - setToken as oauthSetToken, - remove as oauthRemove, - authorize as oauthAuthorize, -} from "../../../redux/oauth"; -import { RootState } from '../../../redux/store'; -import { Account } from '../../types/account'; - -export interface OauthTokenRequestBody { - client_id: string; - client_secret: string; - redirect_uri: string; - grant_type: string; - code: string; -} - -function getSettingsURL() { - /* - needed in case the settings interface isn't hosted at /settings but - some subpath like /gotosocial/settings. Other parts of the code don't - take this into account yet so mostly future-proofing. - - Also drops anything past /settings/, because authorization urls that are too long - get rejected by GTS. - */ - let [pre, _past] = window.location.pathname.split("/settings"); - return `${window.location.origin}${pre}/settings`; -} - -const SETTINGS_URL = (getSettingsURL()); - -// Couple auth functions here require multiple requests as -// part of an OAuth token 'flow'. To keep things simple for -// callers of these query functions, the multiple requests -// are chained within one query. -// -// https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query -const extended = gtsApi.injectEndpoints({ - endpoints: (build) => ({ - verifyCredentials: build.query({ - providesTags: (_res, error) => - error == undefined ? ["Auth"] : [], - async queryFn(_arg, api, _extraOpts, fetchWithBQ) { - const state = api.getState() as RootState; - const oauthState = state.oauth; - - // If we're not in the middle of an auth/callback, - // we may already have an auth token, so just - // return a standard verify_credentials query. - if (oauthState.loginState != 'callback') { - return fetchWithBQ({ - url: `/api/v1/accounts/verify_credentials` - }); - } - - // We're in the middle of an auth/callback flow. - // Try to retrieve callback code from URL query. - let urlParams = new URLSearchParams(window.location.search); - let code = urlParams.get("code"); - if (code == undefined) { - return { - error: { - status: 400, - statusText: 'Bad Request', - data: {"error":"Waiting for callback, but no ?code= provided in url."}, - }, - }; - } - - // Retrieve app with which the - // callback code was generated. - let app = oauthState.app; - if (app == undefined || app.client_id == undefined) { - return { - error: { - status: 400, - statusText: 'Bad Request', - data: {"error":"No stored app registration data, can't finish login flow."}, - }, - }; - } - - // Use the provided code and app - // secret to request an auth token. - const tokenReqBody: OauthTokenRequestBody = { - client_id: app.client_id, - client_secret: app.client_secret, - redirect_uri: SETTINGS_URL, - grant_type: "authorization_code", - code: code - }; - - const tokenResult = await fetchWithBQ({ - method: "POST", - url: "/oauth/token", - body: tokenReqBody, - }); - if (tokenResult.error) { - return { error: tokenResult.error as FetchBaseQueryError }; - } - - // Remove ?code= query param from - // url, we don't want it anymore. - window.history.replaceState({}, document.title, window.location.pathname); - - // Store returned token in redux. - api.dispatch(oauthSetToken(tokenResult.data)); - - // We're now authed! So return - // standard verify_credentials query. - return fetchWithBQ({ - url: `/api/v1/accounts/verify_credentials` - }); - } - }), - - authorizeFlow: build.mutation({ - async queryFn(formData, api, _extraOpts, fetchWithBQ) { - const state = api.getState() as RootState; - const oauthState = state.oauth; - - let instanceUrl: string; - if (!formData.instance.startsWith("http")) { - formData.instance = `https://${formData.instance}`; - } - - instanceUrl = new URL(formData.instance).origin; - if (oauthState?.instanceUrl == instanceUrl && oauthState.app) { - return { data: oauthState.app }; - } - - const appResult = await fetchWithBQ({ - method: "POST", - baseUrl: instanceUrl, - url: "/api/v1/apps", - body: { - client_name: "GoToSocial Settings", - scopes: formData.scopes, - redirect_uris: SETTINGS_URL, - website: SETTINGS_URL - } - }); - if (appResult.error) { - return { error: appResult.error as FetchBaseQueryError }; - } - - let app = appResult.data as any; - - app.scopes = formData.scopes; - api.dispatch(oauthAuthorize({ - instanceUrl: instanceUrl, - app: app, - loginState: "callback", - expectingRedirect: true - })); - - let url = new URL(instanceUrl); - url.pathname = "/oauth/authorize"; - url.searchParams.set("client_id", app.client_id); - url.searchParams.set("redirect_uri", SETTINGS_URL); - url.searchParams.set("response_type", "code"); - url.searchParams.set("scope", app.scopes); - - let redirectURL = url.toString(); - window.location.assign(redirectURL); - return { data: null }; - }, - }), - logout: build.mutation({ - queryFn: (_arg, api) => { - api.dispatch(oauthRemove()); - return { data: null }; - }, - invalidatesTags: ["Auth"] - }) - }) -}); - -export const { - useVerifyCredentialsQuery, - useAuthorizeFlowMutation, - useLogoutMutation, -} = extended; diff --git a/web/source/settings/lib/query/user/applications.ts b/web/source/settings/lib/query/user/applications.ts new file mode 100644 index 000000000..9d271a1e1 --- /dev/null +++ b/web/source/settings/lib/query/user/applications.ts @@ -0,0 +1,146 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import { RootState } from "../../../redux/store"; +import { + SearchAppParams, + SearchAppResp, + App, + AppCreateParams, +} from "../../types/application"; +import { OAuthAccessToken, OAuthAccessTokenRequestBody } from "../../types/oauth"; +import { gtsApi } from "../gts-api"; +import parse from "parse-link-header"; + +const extended = gtsApi.injectEndpoints({ + endpoints: (build) => ({ + searchApp: build.query({ + query: (form) => { + const params = new(URLSearchParams); + Object.entries(form).forEach(([k, v]) => { + if (v !== undefined) { + params.append(k, v); + } + }); + + let query = ""; + if (params.size !== 0) { + query = `?${params.toString()}`; + } + + return { + url: `/api/v1/apps${query}` + }; + }, + // Headers required for paging. + transformResponse: (apiResp: App[], meta) => { + const apps = apiResp; + const linksStr = meta?.response?.headers.get("Link"); + const links = parse(linksStr); + return { apps, links }; + }, + providesTags: [{ type: "Application", id: "TRANSFORMED" }] + }), + + getApp: build.query({ + query: (id) => ({ + method: "GET", + url: `/api/v1/apps/${id}`, + }), + providesTags: (_result, _error, id) => [ + { type: 'Application', id } + ], + }), + + createApp: build.mutation({ + query: (formData) => ({ + method: "POST", + url: `/api/v1/apps`, + asForm: true, + body: formData, + discardEmpty: true + }), + invalidatesTags: [{ type: "Application", id: "TRANSFORMED" }], + }), + + deleteApp: build.mutation({ + query: (id) => ({ + method: "DELETE", + url: `/api/v1/apps/${id}` + }), + invalidatesTags: (_result, _error, id) => [ + { type: 'Application', id }, + { type: "Application", id: "TRANSFORMED" }, + { type: "TokenInfo", id: "TRANSFORMED" }, + ], + }), + + getOOBAuthCode: build.mutation({ + async queryFn({ app, scope, redirectURI }, api, _extraOpts, _fetchWithBQ) { + // Fetch the instance URL string from + // oauth state, eg., https://example.org. + const state = api.getState() as RootState; + if (!state.login.instanceUrl) { + return { + error: { + status: 'CUSTOM_ERROR', + error: "oauthState.instanceUrl undefined", + } + }; + } + const instanceUrl = state.login.instanceUrl; + + // Parse instance URL + set params on it. + const url = new URL(instanceUrl); + url.pathname = "/oauth/authorize"; + url.searchParams.set("client_id", app.client_id); + url.searchParams.set("redirect_uri", redirectURI); + url.searchParams.set("response_type", "code"); + url.searchParams.set("scope", scope); + + // Set the app ID in state so we know which + // app to get out of our store after redirect. + url.searchParams.set("state", app.id); + + // Whisk the user away to the authorize page. + window.location.assign(url.toString()); + return { data: null }; + } + }), + + getAccessTokenForApp: build.mutation({ + query: (formData) => ({ + method: "POST", + url: `/oauth/token`, + asForm: true, + body: formData, + discardEmpty: true + }), + }), + }) +}); + +export const { + useLazySearchAppQuery, + useCreateAppMutation, + useGetAppQuery, + useGetOOBAuthCodeMutation, + useGetAccessTokenForAppMutation, + useDeleteAppMutation, +} = extended; -- cgit v1.2.3