embed our login firebase flow into the application

linear[bot] commented 1 month ago

when i authenticate from my email, it opens a new tab
the email itself looks very sad
replace firebase emails with app.highlight.io urls?
update firebase email styling

linear[bot] commented 1 month ago

HIG-4658 embed our login firebase flow into the application

greptile-apps[bot] commented 1 month ago

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=

References

/frontend/src/pages/Auth/SignIn.tsx /frontend/src/util/auth.tsx /frontend/src/pages/Auth/ResetPassword.tsx /frontend/src/pages/Auth/SignUp.tsx /frontend/src/pages/Auth/VerifyEmail.tsx /frontend/src/pages/Auth/MultiFactor.tsx

Ask Greptile

highlight / highlight

embed our login firebase flow into the application #8574

References