I would like to customize the email template (using the Trigger Email extension templates) to send verification links to users.
I understand it is not possible to change the template from the Firebase console as it prevents spam.
I am aware of the ability to customize action email handlers (The page that the user lands on when the link in verification email is clicked), as well as the ability to update the auth user's emailVerified property manually.
Is there also a way to generate the verification link that firebase would have used? One with the following properties:
mode
oobCode
apiKey
continueUrl
lang
My ideal solution is to send a custom template to the user upon registration with the generated verification link. Direct users to a custom handler page, and use the applyActionCode() function as shown in The Docs to verify the email (I hope this implicitly updates the emailVerified property on the Auth.User record.)
I have achieved this by creating the user and generating the link on the backend with the admin SDK.
So your frontend would call a callable function or bespoke API endpoint for instance for the registration instead of using the SDK directly.
The callable would go about this:
Creating the user in Auth: auth.createUser()
Creating the user in your DB (Firestore, Mongo etc.)
Assigning custom claims if required: auth.setCustomUserClaims
Building the link for signin: auth.generateSignInWithEmailLink()
Sending the email to an email transactional API
You will need an ESP e.g Sendgrid, MailChimp, MailGun etc. for the last step. There you will have all the freedom to build your own templates.
Please note that the generateSignInWithEmailLink will take care of verifying an email address and signing-in. It could therefore be used for login and registration.
Cheers
Related
I have a Flutter mobile application and I am using Firebase authentication. I have decided to use email template for verifying user email. In the backend, I call generateEmailVerificationLink(email ,actionCode) to create an email verification link, then I pass the link to a good looking email template and send it to the user.
I would like to do the same thing for updating user email. But I am not sure which function to call in the backend to create the proper link that I need to pass to the email temple. The mode in the action code should be "verifyAndChangeEmail"
Does any one know?
I found this link https://firebase.google.com/docs/auth/admin/email-action-links
but it does not say how to generate a link for updating user email. Does that mean that I can't have a custom email for updating user email??
Please help.
You can use the same generateEmailVerificationLink() method, and, in the page opened via the link, you need to trigger, in the back-end, the updateUser() method of the Admin SDK.
More concretely:
In a Cloud Function (or a server you own), generate an email verification link for the new email (as explained in the doc you mention in your question) and build and send an email containing this link (for example by calling a microservice like Sendgrid).
The user receives the email in his mailbox. When he clicks on the link, the user is redirected to a web page you host somewhere (for example with Firebase hosting): the email is then verified, with applyActionCode(), as shown in the code found in this page in the Firebase doc (see "4. Handle email address verification by calling applyActionCode.").
Then, in the .then((resp) => {...}) block of this page, implement a call to a callable Cloud Function in which you use the updateUser() method to update the user's email. In the callable cloud function you must check that the uid (User ID) that you pass to the updateUser() method is the uid of the caller (with const uid = context.auth.uid; see the doc).
I am working on an application in which I want the user to reset the password using FirebaseAuth but I do not want the user to reset the password on the template provided by the Firebase. Instead I want to send the user in my application to reset the password.
Is there any way of implementing that?
You can do so by using custom email handlers along with dynamic links to open them in your app. This might require a custom domain to do so. Once the user visits your application on the custom route/page, you can then use applyActionCode method to process the email action. Checkout my answer here for a detailed explanation on processing the email actions:
How to build a custom Email action handler in Flutter for Firebase Authentication
I'm using firebase auth in my app and i'm setting up password-less email sign up.
I have managed to set the email from my own domain but how do i change the text sent in the email for magic link?
I can see the configuration for the other template emails but not this one.
The email in question is this one:
Hello,
We received a request to sign in to teamname using this email address. If you want to sign in with your youremail account, click this link: link
If you did not request this link, you can safely ignore this email.
Thanks,
There is no way to edit any of the email templates that Firebase Authentication uses. The reason for this is that this allows bad actors to use Firebase to spam people, which would put the service at risk.
To control what message gets sent, you'll have to send it yourself and handle the verification flow with a custom email action handler. See How to modify Email Confirmation message - Firebase.
You could also take full control of the verification flow, and then use the Admin SDK to set the emailVerified flag of the user's profile.
Following on from Frank's answer, you will have to create your own email action link using the Firebase Admin SDK and then put that link in your custom email which you will then send using whatever service (Sendgrid, Mailgun, etc.).
See how to create the action link here: Generating Email Action Links
the only way to customize your email body is to install firebase extension called Trigger Email but it'll put you on the Blaze plan because it makes requests to third-party APIs, and as they specified on the extension's page you'll only be charged for usage that exceeds Firebase's free tier.
There are two ways to customize the email body when using the Firebase authentication service. However, the drawback is that you will have to create a backend to send the email yourself rather than just using a function from the SDK that handles everything automatically.
Generate email action links:
This is the most efficient method, it requires that you use the Firebase Admin SDK to generate a link that will be embedded in emails sent to your users.
Here is an example code that shows how to create an API to send customized verification emails using Express as the backend:
// Creating a POST route that sends customized verification emails
app.post('/send-custom-verification-email', async (req, res) => {
const {userEmail, redirectUrl} = req.body
const actionCodeSettings = {
url: redirectUrl
}
try{
// generate action like with the Firebase Admin SDK
const actionLink = await getAuth()
.generateEmailVerificationLink(userEmail, actionCodeSettings)
// embedding action link to customized verification email template
const template = await ejs.renderFile('views/verify-email.ejs', {
actionLink
})
// send verification email using SendGrid, Nodemailer, etc.
await sendVerificationEmail(userEmail, template, actionLink)
res.status(200).json({message:'Email successfully sent'})
}catch(error){
// handle errors
}
})
You can read more about it in the article I wrote here
Take full control over the workflow:
With this, the Firebase Admin SDK won't be used to generate an action link, but rather, you will generate the link yourself and create an API that uses the Admin SDK to handle the action to be taken whenever the link is clicked.
To do this you will have to create two API routes. One is a route that sends the emails and the other is a route that uses the Firebase Admin SDK to handle the action to be taken when the link attached to the email is clicked.
I am generating email verification using the default Firebase function.
The default email verification success page looks like that:
I want to customize the response page after successful email verification.
Is there a way to do that?
I want to customize the response page after successful email
verification. Is there a way to do that?
Yes, as Frank indicated in his above comment, it is possible and the documentation he refers to explains the mechanism.
As explained in this doc (and also in my other answer :-) ), you need to build a web page in which you will:
Get the values passed as QueryString parameters (e.g. mode or oobCode)
Call, from this web page, the applyActionCode() method of the Firebase JavaScript SDK, passing the values of these parameters to the method.
Upon successful verification, do something, like redirect the user to your app login page.
What's important to note is that you have two ways to generate the email sent to the user (which contains the link to the page described above):
1. Rely on the default Firebase mail mechanism. In order to customize the URL of the verification link (e.g. you want to redirect to https://www.myrapp.com/emailVerifyScreen) you need to change the base URL as shown in the below image ("Customize action URL"). Also explained here in the doc.
2. Send the email through a Cloud Function (or through a server you own). In this case you need to:
a/ Call the generateEmailVerificationLink() method of the Admin SDK, which returns a link
b/ Generate an email containing this link
c/ Send the email to the user (via an SMTP server you control or via a microservice like Mailjet or Sendgrid)
You may have a look at these other answers:
https://stackoverflow.com/a/66350538/3371862
Flutter: Sending Email Verification code through FlutterFire?
How to sign up only the users who have verified thier email addresses using the email link in Firebase javascript?
Firebase Auth has a method to send a verification email so the user can reset his/her password. This link redirects the user to a website where the new password will be written and saved.
Is there a way to reset a user's password using flutter and firebase inapp? I mean, could I send a verification code through SMS or email that would be then typed into the app and the user would choose a new password all inside the app?
Thank you!
To be able to change a user's password directly through the API, the user will have to enter their current password in order to be able to update it.
If you use the Admin SDK however you can implement whatever flow you want, and update the password at the end of the flow. But of course in that case it is up to you to ensure you do it securely.
You can do so by using custom email handlers along with dynamic links to open them in your app. This might require a custom domain to do so. Once the user visits your application on the custom route/page, you can then use applyActionCode method to process the email action. Checkout my answer here for a detailed explanation on processing the email actions:
How to build a custom Email action handler in Flutter for Firebase Authentication