move oauth api

src/api/mfa.js

@@ -16,7 +16,7 @@ export const verifyOTPCode = ({
   formData.append('challenge_type', 'totp')
 
   return promisedRequest({
-    url: '/oauth/mfa/challenge'
+    url: '/oauth/mfa/challenge',
     method: 'POST',
     formData,
   })
@@ -29,7 +29,6 @@ export const verifyRecoveryCode = ({
   mfaToken,
   code,
 }) => {
-  const url = `${instance}`
   const formData = new window.FormData()
 
   formData.append('client_id', clientId)
@@ -39,7 +38,7 @@ export const verifyRecoveryCode = ({
   formData.append('challenge_type', 'recovery')
 
   return promisedRequest({
-    url: '/oauth/mfa/challenge'
+    url: `${instance}/oauth/mfa/challenge`,
     method: 'POST',
     formData,
   })

src/api/oauth.js

@@ -0,0 +1,138 @@
+import { reduce } from 'lodash'
+
+import { paramsString, promisedRequest } from './helpers.js'
+
+import { StatusCodeError } from 'src/services/errors/errors.js'
+
+const REDIRECT_URI = `${window.location.origin}/oauth-callback`
+
+export const createApp = ({ instance }) => {
+  const formData = new window.FormData()
+
+  formData.append('client_name', 'PleromaFE')
+  formData.append('website', 'https://pleroma.social')
+  formData.append('redirect_uris', REDIRECT_URI)
+  formData.append('scopes', 'read write follow push admin')
+
+  return promisedRequest({
+    url: `${instance}/api/v1/apps`,
+    method: 'POST',
+    formData,
+  }).then(({ data, ...rest }) => ({
+    ...rest,
+    data: {
+      ...data,
+      clientId: data.client_id,
+      clientSecret: data.client_secret,
+    },
+  }))
+}
+
+export const getLoginUrl = ({ instance, clientId }) => {
+  const data = {
+    responseType: 'code',
+    clientId,
+    redirectUri: REDIRECT_URI,
+    scope: 'read write follow push admin',
+  }
+
+  return `${instance}/oauth/authorize${paramsString(data)}`
+}
+
+export const getTokenWithCredentials = ({
+  clientId,
+  clientSecret,
+  instance,
+  username,
+  password,
+}) => {
+  const formData = new window.FormData()
+
+  formData.append('client_id', clientId)
+  formData.append('client_secret', clientSecret)
+  formData.append('grant_type', 'password')
+  formData.append('username', username)
+  formData.append('password', password)
+
+  return promisedRequest({
+    url: `${instance}/oauth/token`,
+    method: 'POST',
+    formData,
+  })
+}
+
+export const getToken = ({ clientId, clientSecret, instance, code }) => {
+  const formData = new window.FormData()
+
+  formData.append('client_id', clientId)
+  formData.append('client_secret', clientSecret)
+  formData.append('grant_type', 'authorization_code')
+  formData.append('code', code)
+  formData.append('redirect_uri', `${window.location.origin}/oauth-callback`)
+
+  return promisedRequest({
+    url: `${instance}/oauth/token`,
+    method: 'POST',
+    formData,
+  })
+}
+
+export const getClientToken = ({ clientId, clientSecret, instance }) => {
+  const formData = new window.FormData()
+
+  formData.append('client_id', clientId)
+  formData.append('client_secret', clientSecret)
+  formData.append('grant_type', 'client_credentials')
+  formData.append('redirect_uri', `${window.location.origin}/oauth-callback`)
+
+  return promisedRequest({
+    url: `${instance}/oauth/token`,
+    method: 'POST',
+    formData,
+  })
+}
+export const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
+  const formData = new window.FormData()
+
+  formData.append('client_id', app.client_id)
+  formData.append('client_secret', app.client_secret)
+  formData.append('mfa_token', mfaToken)
+  formData.append('code', code)
+  formData.append('challenge_type', 'totp')
+
+  return promisedRequest({
+    url: `${instance}/oauth/mfa/challenge`,
+    method: 'POST',
+    formData,
+  })
+}
+
+export const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
+  const formData = new window.FormData()
+
+  formData.append('client_id', app.client_id)
+  formData.append('client_secret', app.client_secret)
+  formData.append('mfa_token', mfaToken)
+  formData.append('code', code)
+  formData.append('challenge_type', 'recovery')
+
+  return promisedRequest({
+    url: `${instance}/oauth/mfa/challenge`,
+    method: 'POST',
+    formData,
+  })
+}
+
+export const revokeToken = ({ app, instance, token }) => {
+  const formData = new window.FormData()
+
+  formData.append('client_id', app.clientId)
+  formData.append('client_secret', app.clientSecret)
+  formData.append('token', token)
+
+  return promisedRequest({
+    url: `${instance}/oauth/revoke`,
+    method: 'POST',
+    formData,
+  })
+}

src/components/login_form/login_form.js

@@ -1,12 +1,12 @@
 import { mapActions, mapState as mapPiniaState, mapStores } from 'pinia'
 import { mapState } from 'vuex'
 
-import oauthApi from '../../services/new_api/oauth.js'
-
 import { useAuthFlowStore } from 'src/stores/auth_flow.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 
+import { getLoginUrl, getTokenWithCredentials } from 'src/api/oauth.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
@@ -35,19 +35,13 @@ const LoginForm = {
       this.isTokenAuth ? this.submitToken() : this.submitPassword()
     },
     submitToken() {
-      const data = {
-        instance: this.server,
-        commit: this.$store.commit,
-      }
-
       // NOTE: we do not really need the app token, but obtaining a token and
       // calling verify_credentials is the only way to ensure the app still works.
       this.ensureAppToken().then(() => {
-        const app = {
+        window.location.href = getLoginUrl({
           clientId: this.clientId,
-          clientSecret: this.clientSecret,
+          instance: this.server,
-        }
+        })
-        oauthApi.login({ ...app, ...data })
       })
     },
     submitPassword() {
@@ -56,37 +50,31 @@ const LoginForm = {
       // NOTE: we do not really need the app token, but obtaining a token and
       // calling verify_credentials is the only way to ensure the app still works.
       this.ensureAppToken().then(() => {
-        const app = {
+        getTokenWithCredentials({
           clientId: this.clientId,
           clientSecret: this.clientSecret,
-        }
+          instance: this.server,
-
+          username: this.user.username,
-        oauthApi
+          password: this.user.password,
-          .getTokenWithCredentials({
+        }).then((result) => {
-            ...app,
+          if (result.error) {
-            instance: this.server,
+            if (result.error === 'mfa_required') {
-            username: this.user.username,
+              this.requireMFA({ settings: result })
-            password: this.user.password,
+            } else if (result.identifier === 'password_reset_required') {
-          })
+              this.$router.push({
-          .then((result) => {
+                name: 'password-reset',
-            if (result.error) {
+                params: { passwordResetRequested: true },
-              if (result.error === 'mfa_required') {
+              })
-                this.requireMFA({ settings: result })
+            } else {
-              } else if (result.identifier === 'password_reset_required') {
+              this.error = result.error
-                this.$router.push({
+              this.focusOnPasswordInput()
-                  name: 'password-reset',
-                  params: { passwordResetRequested: true },
-                })
-              } else {
-                this.error = result.error
-                this.focusOnPasswordInput()
-              }
-              return
             }
-            this.login(result).then(() => {
+            return
-              this.$router.push({ name: 'friends' })
+          }
-            })
+          this.login(result).then(() => {
+            this.$router.push({ name: 'friends' })
           })
+        })
       })
     },
     clearError() {

src/components/mfa_form/recovery_form.js

@@ -1,11 +1,11 @@
 import { mapActions, mapState, mapStores } from 'pinia'
 
-import { verifyRecoveryCode } from 'src/api/mfa.js'
-
 import { useAuthFlowStore } from 'src/stores/auth_flow.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 
+import { verifyRecoveryCode } from 'src/api/mfa.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 

src/components/mfa_form/totp_form.js

@@ -1,11 +1,11 @@
 import { mapActions, mapState, mapStores } from 'pinia'
 
-import { verifyOTPCode } from 'src/api/mfa.js'
-
 import { useAuthFlowStore } from 'src/stores/auth_flow.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 
+import { verifyOTPCode } from 'src/api/mfa.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 

src/components/oauth_callback/oauth_callback.js

@@ -1,8 +1,8 @@
-import oauth from '../../services/new_api/oauth.js'
-
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 
+import { getToken } from 'src/api/oauth.js'
+
 const oac = {
   props: ['code'],
   mounted() {
@@ -10,18 +10,16 @@ const oac = {
       const oauthStore = useOAuthStore()
       const { clientId, clientSecret } = oauthStore
 
-      oauth
+      getToken({
-        .getToken({
+        clientId,
-          clientId,
+        clientSecret,
-          clientSecret,
+        instance: useInstanceStore().server,
-          instance: useInstanceStore().server,
+        code: this.code,
-          code: this.code,
+      }).then(({ data: result }) => {
-        })
+        oauthStore.setToken(result.access_token)
-        .then((result) => {
+        this.$store.dispatch('loginUser', result.access_token)
-          oauthStore.setToken(result.access_token)
+        this.$router.push({ name: 'friends' })
-          this.$store.dispatch('loginUser', result.access_token)
+      })
-          this.$router.push({ name: 'friends' })
-        })
     }
   },
 }

src/modules/users.js

@@ -9,7 +9,6 @@ import {
   uniq,
 } from 'lodash'
 
-import oauthApi from '../services/new_api/oauth.js'
 import {
   registerPushNotifications,
   unregisterPushNotifications,
@@ -30,6 +29,7 @@ import { useOAuthStore } from 'src/stores/oauth.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
+import { revokeToken } from 'src/api/oauth.js'
 import {
   fetchFollowers,
   fetchFriends,
@@ -711,7 +711,7 @@ const users = {
             token: oauth.userToken,
           }
 
-          return oauthApi.revokeToken(params)
+          return revokeToken(params)
         })
         .then(() => {
           store.commit('clearCurrentUser')

src/services/new_api/oauth.js

@@ -1,198 +0,0 @@
-import { reduce } from 'lodash'
-
-import { StatusCodeError } from 'src/services/errors/errors.js'
-
-const REDIRECT_URI = `${window.location.origin}/oauth-callback`
-
-export const getJsonOrError = async (response) => {
-  if (response.ok) {
-    return response.json().catch((error) => {
-      throw new StatusCodeError(response.status, error, {}, response)
-    })
-  } else {
-    throw new StatusCodeError(
-      response.status,
-      await response.text(),
-      {},
-      response,
-    )
-  }
-}
-
-export const createApp = (instance) => {
-  const url = `${instance}/api/v1/apps`
-  const form = new window.FormData()
-
-  form.append('client_name', 'PleromaFE')
-  form.append('website', 'https://pleroma.social')
-  form.append('redirect_uris', REDIRECT_URI)
-  form.append('scopes', 'read write follow push admin')
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then(getJsonOrError)
-    .then((app) => ({
-      clientId: app.client_id,
-      clientSecret: app.client_secret,
-    }))
-}
-
-export const verifyAppToken = ({ instance, appToken }) => {
-  return window
-    .fetch(`${instance}/api/v1/apps/verify_credentials`, {
-      method: 'GET',
-      headers: { Authorization: `Bearer ${appToken}` },
-    })
-    .then(getJsonOrError)
-}
-
-const login = ({ instance, clientId }) => {
-  const data = {
-    response_type: 'code',
-    client_id: clientId,
-    redirect_uri: REDIRECT_URI,
-    scope: 'read write follow push admin',
-  }
-
-  const dataString = reduce(
-    data,
-    (acc, v, k) => {
-      const encoded = `${k}=${encodeURIComponent(v)}`
-      if (!acc) {
-        return encoded
-      } else {
-        return `${acc}&${encoded}`
-      }
-    },
-    false,
-  )
-
-  // Do the redirect...
-  const url = `${instance}/oauth/authorize?${dataString}`
-
-  window.location.href = url
-}
-
-const getTokenWithCredentials = ({
-  clientId,
-  clientSecret,
-  instance,
-  username,
-  password,
-}) => {
-  const url = `${instance}/oauth/token`
-  const form = new window.FormData()
-
-  form.append('client_id', clientId)
-  form.append('client_secret', clientSecret)
-  form.append('grant_type', 'password')
-  form.append('username', username)
-  form.append('password', password)
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then((data) => data.json())
-}
-
-const getToken = ({ clientId, clientSecret, instance, code }) => {
-  const url = `${instance}/oauth/token`
-  const form = new window.FormData()
-
-  form.append('client_id', clientId)
-  form.append('client_secret', clientSecret)
-  form.append('grant_type', 'authorization_code')
-  form.append('code', code)
-  form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then((data) => data.json())
-}
-
-export const getClientToken = ({ clientId, clientSecret, instance }) => {
-  const url = `${instance}/oauth/token`
-  const form = new window.FormData()
-
-  form.append('client_id', clientId)
-  form.append('client_secret', clientSecret)
-  form.append('grant_type', 'client_credentials')
-  form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then(getJsonOrError)
-}
-const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
-  const url = `${instance}/oauth/mfa/challenge`
-  const form = new window.FormData()
-
-  form.append('client_id', app.client_id)
-  form.append('client_secret', app.client_secret)
-  form.append('mfa_token', mfaToken)
-  form.append('code', code)
-  form.append('challenge_type', 'totp')
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then((data) => data.json())
-}
-
-const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
-  const url = `${instance}/oauth/mfa/challenge`
-  const form = new window.FormData()
-
-  form.append('client_id', app.client_id)
-  form.append('client_secret', app.client_secret)
-  form.append('mfa_token', mfaToken)
-  form.append('code', code)
-  form.append('challenge_type', 'recovery')
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then((data) => data.json())
-}
-
-const revokeToken = ({ app, instance, token }) => {
-  const url = `${instance}/oauth/revoke`
-  const form = new window.FormData()
-
-  form.append('client_id', app.clientId)
-  form.append('client_secret', app.clientSecret)
-  form.append('token', token)
-
-  return window
-    .fetch(url, {
-      method: 'POST',
-      body: form,
-    })
-    .then((data) => data.json())
-}
-
-const oauth = {
-  login,
-  getToken,
-  getTokenWithCredentials,
-  verifyOTPCode,
-  verifyRecoveryCode,
-  revokeToken,
-}
-
-export default oauth

src/stores/announcements.js

@@ -86,18 +86,20 @@ export const useAnnouncementsStore = defineStore('announcements', {
       }
     },
     markAnnouncementAsRead(id) {
-      return this.userActions.dismissAnnouncement({
+      return this.userActions
-        id,
+        .dismissAnnouncement({
-        credentials: useOAuthStore().token,
+          id,
-      }).then(() => {
+          credentials: useOAuthStore().token,
-        const index = this.announcements.findIndex((a) => a.id === id)
+        })
+        .then(() => {
+          const index = this.announcements.findIndex((a) => a.id === id)
 
-        if (index < 0) {
+          if (index < 0) {
-          return
+            return
-        }
+          }
 
-        this.announcements[index].read = true
+          this.announcements[index].read = true
-      })
+        })
     },
     startFetchingAnnouncements() {
       if (this.fetchAnnouncementsTimer) {

src/stores/oauth.js

@@ -2,11 +2,8 @@ import { defineStore } from 'pinia'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 
-import {
+import { createApp, getClientToken } from 'src/api/oauth.js'
-  createApp,
+import { verifyCredentials } from 'src/api/public.js'
-  getClientToken,
-  verifyAppToken,
-} from 'src/services/new_api/oauth.js'
 
 // status codes about verifyAppToken (GET /api/v1/apps/verify_credentials)
 const isAppTokenRejected = (error) =>
@@ -61,9 +58,9 @@ export const useOAuthStore = defineStore('oauth', {
     },
     async createApp() {
       const instance = useInstanceStore().server
-      const app = await createApp(instance)
+      const app = await createApp({ instance })
-      this.setClientData(app)
+      this.setClientData(app.data)
-      return app
+      return app.data
     },
     /// Use this if you want to get the client id and secret but are not interested
     /// in whether they are valid.
@@ -85,7 +82,7 @@ export const useOAuthStore = defineStore('oauth', {
         clientSecret: this.clientSecret,
         instance,
       })
-      this.setAppToken(res.access_token)
+      this.setAppToken(res.data.access_token)
       return res.access_token
     },
     /// Use this if you want to ensure the app is still valid to use.
@@ -93,9 +90,8 @@ export const useOAuthStore = defineStore('oauth', {
     async ensureAppToken() {
       if (this.appToken) {
         try {
-          await verifyAppToken({
+          await verifyCredentials({
-            instance: useInstanceStore().server,
+            credentials: this.appToken,
-            appToken: this.appToken,
           })
           return this.appToken
         } catch (e) {