use remark_config.host for oauth links

frontend/app/components/auth/components/oauth.spec.tsx

@@ -1,11 +1,12 @@
 import { h } from 'preact';
 import { fireEvent, render, waitFor } from '@testing-library/preact';
 
+import type { User } from 'common/types';
 import * as userActions from 'store/user/actions';
+import { BASE_URL } from 'common/constants.config';
 
 import OAuth from './oauth';
 import * as api from './oauth.api';
-import { User } from 'common/types';
 
 jest.mock('react-redux', () => ({
   useDispatch: () => jest.fn(),
@@ -27,7 +28,7 @@ describe('<OAuth />', () => {
     const { container } = render(<OAuth providers={['google']} />);
 
     expect(container.querySelector('a')?.getAttribute('href')).toBe(
-      '/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark'
+      `${BASE_URL}/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark`
     );
   });
 
@@ -40,7 +41,7 @@ describe('<OAuth />', () => {
 
     await waitFor(() =>
       expect(oauthSignin).toBeCalledWith(
-        'http://localhost/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark'
+        `${BASE_URL}/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark`
       )
     );
     expect(setUser).toBeCalledTimes(0);
@@ -55,7 +56,7 @@ describe('<OAuth />', () => {
 
     await waitFor(() =>
       expect(oauthSignin).toBeCalledWith(
-        'http://localhost/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark'
+        `${BASE_URL}/auth/google/login?from=http%3A%2F%2Flocalhost%2F%3FselfClose&site=remark`
       )
     );
     expect(setUser).toBeCalledWith({});

frontend/app/components/auth/components/oauth.tsx

@@ -1,4 +1,4 @@
-import { h, FunctionComponent, JSX } from 'preact';
+import { h, JSX } from 'preact';
 import { useDispatch } from 'react-redux';
 import cn from 'classnames';
 import { useIntl } from 'react-intl';
@@ -13,14 +13,15 @@ import messages from 'components/auth/auth.messsages';
 import { getButtonVariant, getProviderData } from './oauth.utils';
 import { oauthSignin } from './oauth.api';
 import styles from './oauth.module.css';
-
-export type OAuthProvidersProps = {
-  providers: OAuthProvider[];
-};
+import { BASE_URL } from 'common/constants.config';
 
 const location = encodeURIComponent(`${window.location.origin}${window.location.pathname}?selfClose`);
 
-const OAuthProviders: FunctionComponent<OAuthProvidersProps> = ({ providers }) => {
+type Props = {
+  providers: OAuthProvider[];
+};
+
+export default function OAuthProviders({ providers }: Props) {
   const intl = useIntl();
   const dispath = useDispatch();
   const theme = useTheme();
@@ -48,7 +49,7 @@ const OAuthProviders: FunctionComponent<OAuthProvidersProps> = ({ providers }) =
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href={`/auth/${p}/login?from=${location}&site=${siteId}`}
+              href={`${BASE_URL}/auth/${p}/login?from=${location}&site=${siteId}`}
               onClick={handleOathClick}
               className={cn('oauth-button', styles.button, styles[buttonVariant], styles[p])}
               data-provider-name={name}
@@ -61,6 +62,4 @@ const OAuthProviders: FunctionComponent<OAuthProvidersProps> = ({ providers }) =
       })}
     </ul>
   );
-};
-
-export default OAuthProviders;
+}