Use redux auth for now

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 @. */

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) => {

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<ISoapboxLoad> = ({ 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<Record<string, string>>({});
   const [localeLoading, setLocaleLoading] = useState(true);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -231,8 +231,7 @@ const SoapboxLoad: React.FC<ISoapboxLoad> = ({ children }) => {
 
   // Load initial data from the API
   useEffect(() => {
-    dispatch(loadInitial()).then((account) => {
+    dispatch(loadInitial()).then(() => {
-      setAccount(account);
       setIsLoaded(true);
     }).catch(() => {
       setIsLoaded(true);
@@ -290,17 +289,15 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
 /** The root React node of the application. */
 const Soapbox: React.FC = () => {
   return (
-    <AuthProvider>
+    <QueryClientProvider client={queryClient}>
-      <QueryClientProvider client={queryClient}>
+      <Provider store={store}>
-        <Provider store={store}>
+        <SoapboxHead>
-          <SoapboxHead>
+          <SoapboxLoad>
-            <SoapboxLoad>
+            <SoapboxMount />
-              <SoapboxMount />
+          </SoapboxLoad>
-            </SoapboxLoad>
+        </SoapboxHead>
-          </SoapboxHead>
+      </Provider>
-        </Provider>
+    </QueryClientProvider>
-      </QueryClientProvider>
-    </AuthProvider>
   );
 };
 

app/soapbox/contexts/auth-context.tsx

@@ -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<any> = ({ children }: { children: React.ReactNode }) => {
-  const [account, setAccount] = useState<IAccount>();
-  const [token, setToken] = useState<string>();
-  const [baseApiUri, setBaseApiUri] = useState<string>();
-
-  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 (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-interface IAuth {
-  account: IAccount
-  baseApiUri: string
-  setAccount(account: IAccount): void
-  token: string
-}
-
-export const useAuth = (): IAuth => useContext(AuthContext);

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 => {