fix: embedded direct template recipient auth

apps/remix/app/components/embed/embed-authentication-required.tsx

@@ -9,6 +9,7 @@ export type EmbedAuthenticationRequiredProps = {
   email?: string;
   returnTo: string;
   isGoogleSSOEnabled?: boolean;
+  isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
   oidcProviderLabel?: string;
 };
@@ -17,6 +18,7 @@ export const EmbedAuthenticationRequired = ({
   email,
   returnTo,
   // isGoogleSSOEnabled,
+  // isMicrosoftSSOEnabled,
   // isOIDCSSOEnabled,
   // oidcProviderLabel,
 }: EmbedAuthenticationRequiredProps) => {
@@ -37,6 +39,7 @@ export const EmbedAuthenticationRequired = ({
         <SignInForm
           // Embed currently not supported.
           // isGoogleSSOEnabled={isGoogleSSOEnabled}
+          // isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
           // isOIDCSSOEnabled={isOIDCSSOEnabled}
           // oidcProviderLabel={oidcProviderLabel}
           className="mt-4"

apps/remix/app/components/forms/signin.tsx

@@ -92,6 +92,7 @@ export const SignInForm = ({
 
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
+  const [isEmbeddedRedirect, setIsEmbeddedRedirect] = useState(false);
 
   const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
     'totp' | 'backup'
@@ -317,6 +318,8 @@ export const SignInForm = ({
     if (email) {
       form.setValue('email', email);
     }
+
+    setIsEmbeddedRedirect(params.get('embedded') === 'true');
   }, [form]);
 
   return (
@@ -383,56 +386,64 @@ export const SignInForm = ({
             {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
           </Button>
 
-          {hasSocialAuthEnabled && (
-            <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-              <div className="bg-border h-px flex-1" />
-              <span className="text-muted-foreground bg-transparent">
-                <Trans>Or continue with</Trans>
-              </span>
-              <div className="bg-border h-px flex-1" />
-            </div>
-          )}
+          {!isEmbeddedRedirect && (
+            <>
+              {hasSocialAuthEnabled && (
+                <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+                  <div className="bg-border h-px flex-1" />
+                  <span className="text-muted-foreground bg-transparent">
+                    <Trans>Or continue with</Trans>
+                  </span>
+                  <div className="bg-border h-px flex-1" />
+                </div>
+              )}
 
-          {isGoogleSSOEnabled && (
-            <Button
-              type="button"
-              size="lg"
-              variant="outline"
-              className="bg-background text-muted-foreground border"
-              disabled={isSubmitting}
-              onClick={onSignInWithGoogleClick}
-            >
-              <FcGoogle className="mr-2 h-5 w-5" />
-              Google
-            </Button>
-          )}
+              {isGoogleSSOEnabled && (
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  className="bg-background text-muted-foreground border"
+                  disabled={isSubmitting}
+                  onClick={onSignInWithGoogleClick}
+                >
+                  <FcGoogle className="mr-2 h-5 w-5" />
+                  Google
+                </Button>
+              )}
 
-          {isMicrosoftSSOEnabled && (
-            <Button
-              type="button"
-              size="lg"
-              variant="outline"
-              className="bg-background text-muted-foreground border"
-              disabled={isSubmitting}
-              onClick={onSignInWithMicrosoftClick}
-            >
-              <img className="mr-2 h-4 w-4" alt="Microsoft Logo" src={'/static/microsoft.svg'} />
-              Microsoft
-            </Button>
-          )}
+              {isMicrosoftSSOEnabled && (
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  className="bg-background text-muted-foreground border"
+                  disabled={isSubmitting}
+                  onClick={onSignInWithMicrosoftClick}
+                >
+                  <img
+                    className="mr-2 h-4 w-4"
+                    alt="Microsoft Logo"
+                    src={'/static/microsoft.svg'}
+                  />
+                  Microsoft
+                </Button>
+              )}
 
-          {isOIDCSSOEnabled && (
-            <Button
-              type="button"
-              size="lg"
-              variant="outline"
-              className="bg-background text-muted-foreground border"
-              disabled={isSubmitting}
-              onClick={onSignInWithOIDCClick}
-            >
-              <FaIdCardClip className="mr-2 h-5 w-5" />
-              {oidcProviderLabel || 'OIDC'}
-            </Button>
+              {isOIDCSSOEnabled && (
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  className="bg-background text-muted-foreground border"
+                  disabled={isSubmitting}
+                  onClick={onSignInWithOIDCClick}
+                >
+                  <FaIdCardClip className="mr-2 h-5 w-5" />
+                  {oidcProviderLabel || 'OIDC'}
+                </Button>
+              )}
+            </>
           )}
 
           <Button

apps/remix/app/components/forms/signup.tsx

@@ -68,6 +68,7 @@ export type SignUpFormProps = {
   isGoogleSSOEnabled?: boolean;
   isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
+  returnTo?: string;
 };
 
 export const SignUpForm = ({
@@ -76,6 +77,7 @@ export const SignUpForm = ({
   isGoogleSSOEnabled,
   isMicrosoftSSOEnabled,
   isOIDCSSOEnabled,
+  returnTo,
 }: SignUpFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -110,7 +112,7 @@ export const SignUpForm = ({
         signature,
       });
 
-      await navigate(`/unverified-account`);
+      await navigate(returnTo ? returnTo : '/unverified-account');
 
       toast({
         title: _(msg`Registration Successful`),

apps/remix/app/components/general/document-signing/document-signing-auth-account.tsx

@@ -22,7 +22,7 @@ export const DocumentSigningAuthAccount = ({
   actionVerb = 'sign',
   onOpenChange,
 }: DocumentSigningAuthAccountProps) => {
-  const { recipient } = useRequiredDocumentSigningAuthContext();
+  const { recipient, isDirectTemplate } = useRequiredDocumentSigningAuthContext();
 
   const { t } = useLingui();
 
@@ -34,8 +34,10 @@ export const DocumentSigningAuthAccount = ({
     try {
       setIsSigningOut(true);
 
+      const currentPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
       await authClient.signOut({
-        redirectPath: `/signin#email=${email}`,
+        redirectPath: `/signin?returnTo=${encodeURIComponent(currentPath)}#embedded=true&email=${isDirectTemplate ? '' : email}`,
       });
     } catch {
       setIsSigningOut(false);
@@ -55,16 +57,28 @@ export const DocumentSigningAuthAccount = ({
         <AlertDescription>
           {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
             <span>
-              <Trans>
-                To mark this document as viewed, you need to be logged in as{' '}
-                <strong>{recipient.email}</strong>
-              </Trans>
+              {isDirectTemplate ? (
+                <Trans>To mark this document as viewed, you need to be logged in.</Trans>
+              ) : (
+                <Trans>
+                  To mark this document as viewed, you need to be logged in as{' '}
+                  <strong>{recipient.email}</strong>
+                </Trans>
+              )}
             </span>
           ) : (
             <span>
-              {/* Todo: Translate */}
-              To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be logged
-              in as <strong>{recipient.email}</strong>
+              {isDirectTemplate ? (
+                <Trans>
+                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
+                  logged in.
+                </Trans>
+              ) : (
+                <Trans>
+                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
+                  logged in as <strong>{recipient.email}</strong>
+                </Trans>
+              )}
             </span>
           )}
         </AlertDescription>

apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx

@@ -47,7 +47,8 @@ export const DocumentSigningAuthDialog = ({
   onOpenChange,
   onReauthFormSubmit,
 }: DocumentSigningAuthDialogProps) => {
-  const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
+  const { recipient, user, isCurrentlyAuthenticating, isDirectTemplate } =
+    useRequiredDocumentSigningAuthContext();
 
   // Filter out EXPLICIT_NONE from available auth types for the chooser
   const validAuthTypes = availableAuthTypes.filter(
@@ -168,7 +169,11 @@ export const DocumentSigningAuthDialog = ({
           match({ documentAuthType: selectedAuthType, user })
             .with(
               { documentAuthType: DocumentAuth.ACCOUNT },
-              { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+              {
+                user: P.when(
+                  (user) => !user || (user.email !== recipient.email && !isDirectTemplate),
+                ),
+              }, // Assume all current auth methods requires them to be logged in.
               () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
             )
             .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -37,6 +37,7 @@ export type DocumentSigningAuthContextValue = {
   derivedRecipientAccessAuth: TRecipientAccessAuthTypes[];
   derivedRecipientActionAuth: TRecipientActionAuthTypes[];
   isAuthRedirectRequired: boolean;
+  isDirectTemplate?: boolean;
   isCurrentlyAuthenticating: boolean;
   setIsCurrentlyAuthenticating: (_value: boolean) => void;
   passkeyData: PasskeyData;
@@ -65,6 +66,7 @@ export const useRequiredDocumentSigningAuthContext = () => {
 export interface DocumentSigningAuthProviderProps {
   documentAuthOptions: Envelope['authOptions'];
   recipient: SigningAuthRecipient;
+  isDirectTemplate?: boolean;
   user?: SessionUser | null;
   children: React.ReactNode;
 }
@@ -72,6 +74,7 @@ export interface DocumentSigningAuthProviderProps {
 export const DocumentSigningAuthProvider = ({
   documentAuthOptions: initialDocumentAuthOptions,
   recipient: initialRecipient,
+  isDirectTemplate = false,
   user,
   children,
 }: DocumentSigningAuthProviderProps) => {
@@ -201,6 +204,7 @@ export const DocumentSigningAuthProvider = ({
         derivedRecipientAccessAuth,
         derivedRecipientActionAuth,
         isAuthRedirectRequired,
+        isDirectTemplate,
         isCurrentlyAuthenticating,
         setIsCurrentlyAuthenticating,
         passkeyData,