diff --git a/app/soapbox/actions/auth.ts b/app/soapbox/actions/auth.ts index 53209464e..d3252e7fb 100644 --- a/app/soapbox/actions/auth.ts +++ b/app/soapbox/actions/auth.ts @@ -202,7 +202,9 @@ export const rememberAuthAccount = (accountUrl: string) => export const loadCredentials = (token: string, accountUrl: string) => (dispatch: AppDispatch) => dispatch(rememberAuthAccount(accountUrl)) - .then(() => dispatch(verifyCredentials(token, accountUrl))) + .then(() => { + dispatch(verifyCredentials(token, accountUrl)); + }) .catch(() => dispatch(verifyCredentials(token, accountUrl))); /** Trim the username and strip the leading @. */ diff --git a/app/soapbox/api.ts b/app/soapbox/api.ts index bdcaf53d8..261bc48a4 100644 --- a/app/soapbox/api.ts +++ b/app/soapbox/api.ts @@ -41,7 +41,7 @@ const maybeParseJSON = (data: string) => { } }; -const getAuthBaseURL = createSelector([ +export const getAuthBaseURL = createSelector([ (state: RootState, me: string | false | null) => state.accounts.getIn([me, 'url']), (state: RootState, _me: string | false | null) => state.auth.get('me'), ], (accountUrl, authUserUrl) => { diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 3de52e7a3..1a87ec4e8 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -13,11 +13,11 @@ import { loadInstance } from 'soapbox/actions/instance'; import { fetchMe } from 'soapbox/actions/me'; import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; +import { getAuthBaseURL } from 'soapbox/api'; import * as BuildConfig from 'soapbox/build_config'; import GdprBanner from 'soapbox/components/gdpr-banner'; import Helmet from 'soapbox/components/helmet'; import LoadingScreen from 'soapbox/components/loading-screen'; -import { AuthProvider, useAuth } from 'soapbox/contexts/auth-context'; import AuthLayout from 'soapbox/features/auth_layout'; import PublicLayout from 'soapbox/features/public_layout'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; @@ -40,6 +40,7 @@ import { } from 'soapbox/hooks'; import MESSAGES from 'soapbox/locales/messages'; import { queryClient, useAxiosInterceptors } from 'soapbox/queries/client'; +import { getAccessToken } from 'soapbox/utils/auth'; import { useCachedLocationHandler } from 'soapbox/utils/redirect'; import { generateThemeCss } from 'soapbox/utils/theme'; @@ -63,7 +64,7 @@ const loadInitial = () => { // @ts-ignore return async(dispatch, getState) => { // Await for authenticated fetch - const account = await dispatch(fetchMe()); + await dispatch(fetchMe()); // Await for feature detection await dispatch(loadInstance()); // Await for configuration @@ -76,8 +77,6 @@ const loadInitial = () => { if (pepeEnabled && !state.me) { await dispatch(fetchVerificationConfig()); } - - return account; }; }; @@ -199,15 +198,16 @@ interface ISoapboxLoad { /** Initial data loader. */ const SoapboxLoad: React.FC = ({ children }) => { const dispatch = useAppDispatch(); - const { setAccount, token, baseApiUri } = useAuth(); - - useAxiosInterceptors(token, baseApiUri); const me = useAppSelector(state => state.me); const account = useOwnAccount(); const swUpdating = useAppSelector(state => state.meta.swUpdating); + const accessToken = useAppSelector((state) => getAccessToken(state)); + const baseURL = useAppSelector((state) => me ? getAuthBaseURL(state, me) : ''); const locale = useLocale(); + useAxiosInterceptors(accessToken, baseURL); + const [messages, setMessages] = useState>({}); const [localeLoading, setLocaleLoading] = useState(true); const [isLoaded, setIsLoaded] = useState(false); @@ -231,8 +231,7 @@ const SoapboxLoad: React.FC = ({ children }) => { // Load initial data from the API useEffect(() => { - dispatch(loadInitial()).then((account) => { - setAccount(account); + dispatch(loadInitial()).then(() => { setIsLoaded(true); }).catch(() => { setIsLoaded(true); @@ -290,17 +289,15 @@ const SoapboxHead: React.FC = ({ children }) => { /** The root React node of the application. */ const Soapbox: React.FC = () => { return ( - - - - - - - - - - - + + + + + + + + + ); }; diff --git a/app/soapbox/contexts/auth-context.tsx b/app/soapbox/contexts/auth-context.tsx deleted file mode 100644 index 7c023e92d..000000000 --- a/app/soapbox/contexts/auth-context.tsx +++ /dev/null @@ -1,77 +0,0 @@ - -import React, { - createContext, - useContext, - useEffect, - useMemo, - useState, -} from 'react'; - -import { localState } from 'soapbox/reducers/auth'; -import { parseBaseURL } from 'soapbox/utils/auth'; - -const AuthContext = createContext(null as any); - -interface IAccount { - acct: string - avatar: string - avatar_static: string - bot: boolean - created_at: string - discoverable: boolean - display_name: string - emojis: string[] - fields: any // not sure - followers_count: number - following_count: number - group: boolean - header: string - header_static: string - id: string - last_status_at: string - location: string - locked: boolean - note: string - statuses_count: number - url: string - username: string - verified: boolean - website: string -} - -export const AuthProvider: React.FC = ({ children }: { children: React.ReactNode }) => { - const [account, setAccount] = useState(); - const [token, setToken] = useState(); - const [baseApiUri, setBaseApiUri] = useState(); - - const value = useMemo(() => ({ - account, - baseApiUri, - setAccount, - token, - }), [account]); - - useEffect(() => { - const cachedAuth: any = localState?.toJS(); - - if (cachedAuth?.me) { - setToken(cachedAuth.users[cachedAuth.me].access_token); - setBaseApiUri(parseBaseURL(cachedAuth.users[cachedAuth.me].url)); - } - }, []); - - return ( - - {children} - - ); -}; - -interface IAuth { - account: IAccount - baseApiUri: string - setAccount(account: IAccount): void - token: string -} - -export const useAuth = (): IAuth => useContext(AuthContext); diff --git a/app/soapbox/reducers/auth.js b/app/soapbox/reducers/auth.js index ad0da1a1d..2f0c773cd 100644 --- a/app/soapbox/reducers/auth.js +++ b/app/soapbox/reducers/auth.js @@ -38,7 +38,7 @@ const getSessionUser = () => { }; const sessionUser = getSessionUser(); -export const localState = fromJS(JSON.parse(localStorage.getItem(STORAGE_KEY))); +const localState = fromJS(JSON.parse(localStorage.getItem(STORAGE_KEY))); // Checks if the user has an ID and access token const validUser = user => {