when i authenticate from my email, it opens a new tab the email itself

<a href="https://linear.app/highlight/issue/HIG-4658/embed-our-login-firebase-flow-int

embed our login firebase flow into the application about highlight HOT 2 OPEN

linear commented on June 8, 2024

embed our login firebase flow into the application

from highlight.

Comments (2)

linear commented on June 8, 2024

HIG-4658 embed our login firebase flow into the application

from highlight.

greptile-apps commented on June 8, 2024

To embed the login Firebase flow into the application and improve the email template, follow these steps:

Embed Login Flow:

In frontend/src/pages/Auth/SignIn.tsx, modify the signIn function to handle the authentication within the same tab.

const handleAuth = useCallback(async () => {
  try {
    const userCredential = await signIn(formStore.email, formStore.password);
    // Handle successful sign-in
  } catch (error) {
    handleAuthError(error);
  }
}, [formStore.email, formStore.password]);

Improve Email Template:

Locate the email template in the react-email-templates directory.
Modify the template to include a more appealing design. For example, update the HTML and CSS to include a header, footer, and better styling.

<html>
<head>
  <style>
    .email-container { font-family: Arial, sans-serif; padding: 20px; }
    .header { background-color: #f8f9fa; padding: 10px; text-align: center; }
    .footer { background-color: #f8f9fa; padding: 10px; text-align: center; }
  </style>
</head>
<body>
  <div class=