feat(client): support login & account linking with OpenID Connect

Author: michaelhthomas

public/images/openid.svg

@@ -31,7 +31,7 @@ type BaseProps<P> = {
   ) => void;
 };
 
-type ButtonProps<P extends React.ElementType> = {
+export type ButtonProps<P extends React.ElementType> = {
   as?: P;
 } & MergeElementProps<P, BaseProps<P>>;
 

src/components/Common/Button/index.tsx

@@ -0,0 +1,35 @@
+import Button, { type ButtonProps } from '@app/components/Common/Button';
+import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
+import { type PropsWithChildren } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type LoginButtonProps = ButtonProps<'button'> &
+  PropsWithChildren<{
+    loading?: boolean;
+  }>;
+
+export default function LoginButton({
+  loading,
+  className,
+  children,
+  ...buttonProps
+}: LoginButtonProps) {
+  return (
+    <Button
+      className={twMerge(
+        'relative flex-grow bg-transparent disabled:opacity-50',
+        className
+      )}
+      disabled={loading}
+      {...buttonProps}
+    >
+      {loading && (
+        <div className="absolute right-0 mr-4 h-4 w-4">
+          <SmallLoadingSpinner />
+        </div>
+      )}
+
+      {children}
+    </Button>
+  );
+}

src/components/Login/LoginButton.tsx

@@ -0,0 +1,79 @@
+import {
+  clearOidcProviderSlug,
+  getOidcErrorMessage,
+  getOidcProviderSlug,
+  initiateOidcLogin,
+  processOidcCallback,
+} from '@app/utils/oidc';
+import type { PublicOidcProvider } from '@server/lib/settings';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import LoginButton from './LoginButton';
+
+type OidcLoginButtonProps = {
+  provider: PublicOidcProvider;
+  onError?: (message: string) => void;
+};
+
+export default function OidcLoginButton({
+  provider,
+  onError,
+}: OidcLoginButtonProps) {
+  const intl = useIntl();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(false);
+
+  const redirectToLogin = useCallback(async () => {
+    setLoading(true);
+    try {
+      await initiateOidcLogin(provider.slug, window.location.href);
+    } catch (e) {
+      setLoading(false);
+      const errorCode = (e as { response?: { data?: { error?: string } } })
+        ?.response?.data?.error;
+      onError?.(getOidcErrorMessage(errorCode, provider.name, intl));
+    }
+  }, [provider, intl, onError]);
+
+  const handleCallback = useCallback(async () => {
+    setLoading(true);
+    const result = await processOidcCallback(provider.slug);
+    if (result.type === 'success') {
+      router.push('/');
+    } else {
+      router.replace('/login');
+      setLoading(false);
+      onError?.(getOidcErrorMessage(result.errorCode, provider.name, intl));
+    }
+  }, [provider, intl, onError, router]);
+
+  useEffect(() => {
+    if (loading) return;
+    const code = searchParams.get('code');
+
+    if (code != null && getOidcProviderSlug() === provider.slug) {
+      clearOidcProviderSlug();
+      // OIDC provider has redirected back with an authorization code
+      handleCallback();
+    } else if (code == null && searchParams.get('provider') === provider.slug) {
+      // Support direct redirect via ?provider=slug query param
+      redirectToLogin();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <LoginButton loading={loading} onClick={() => redirectToLogin()}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={provider.logo || '/images/openid.svg'}
+        alt={provider.name}
+        className="mr-2 max-h-5 w-5"
+      />
+      <span>{provider.name}</span>
+    </LoginButton>
+  );
+}

src/components/Login/OidcLoginButton.tsx

@@ -1,10 +1,9 @@
 import PlexIcon from '@app/assets/services/plex.svg';
-import Button from '@app/components/Common/Button';
-import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import usePlexLogin from '@app/hooks/usePlexLogin';
 import defineMessages from '@app/utils/defineMessages';
 import { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
+import LoginButton from './LoginButton';
 
 const messages = defineMessages('components.Login', {
   loginwithapp: 'Login with {appName}',
@@ -26,18 +25,12 @@ const PlexLoginButton = ({
   const { loading, login } = usePlexLogin({ onAuthToken, onError });
 
   return (
-    <Button
-      className="relative flex-1 border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)] disabled:opacity-50"
+    <LoginButton
+      className="border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)]"
       onClick={login}
-      disabled={loading || isProcessing}
+      loading={loading || isProcessing}
       data-testid="plex-login-button"
     >
-      {loading && (
-        <div className="absolute right-0 mr-4 h-4 w-4">
-          <SmallLoadingSpinner />
-        </div>
-      )}
-
       {large ? (
         <FormattedMessage
           {...messages.loginwithapp}
@@ -60,7 +53,7 @@ const PlexLoginButton = ({
       ) : (
         <PlexIcon className="w-8" />
       )}
-    </Button>
+    </LoginButton>
   );
 };