Magic's custom email provider feature allows users to integrate their own email services with their Magic application. This functionality is particularly useful for businesses who prefer that end users see email notifications from their business domain rather than from Magic.

By default, emails sent from Magic’s servers come from noreply@trymagic.com. With the custom email provider feature, you can configure Magic Wallets to send transaction confirmations, security alerts, and other notifications directly through your chosen email provider.

Setting up the custom email provider involves specifying your SMTP settings with your Magic application. This setup ensures that emails are delivered securely and reliably using the email provider of your choice.

In this guide we will set up a custom email provider and then test its functionality.

#Project prerequisites

To follow along with this guide, you’ll need three things:

1. A Magic Publishable API Key
2. Subscription to Dedicated Pro Bundle
3. A custom email provider

You can get your Publishable API Key from your Magic Dashboard. To subscribe to the Dedicated Pro Bundle please visit the Magic pricing page.

In this guide we’ll use DreamHost as our email provider, but feel free to use any email provider you prefer.

#Enable custom email provider

We will assume that you have all of the required prerequisites and have created a new application with the "Dedicated Pro Bundle" subscription enabled.

Head over to your Magic Dashboard and select the application from the dropdown menu in the left navigation. Once you've selected the application you want to enable a custom email provider with, click on the settings icon. Next, scroll down to the section with the header "Custom Email Provider" and click "Edit".

Next, click the toggle switch to enable the custom email provider and save.

#Add provider information

There are multiple values you must obtain to ensure proper configuration and secure communication between your application and the email service. These values are crucial for authenticating your application's access to the email server and for specifying how the emails should be sent.

Here’s a brief overview of each value we will need to set this up:

• Sender Email: The email address that will appear in the "From" field of the emails sent out. This is the address recipients see as the sender.
• Sender Name: The name associated with the sender email that recipients see. This can be an individual's name or a company name, providing a personal or professional identity to the email.
• Host: The server address of the email provider that handles the outgoing mail. This could be an IP address or a domain name.
• Port: The network port used by the host server to communicate. Email services typically use specific ports like 25, 465, or 587 depending on the security protocol used.
• Username: The account identifier used for authentication with the email service provider. This is often the sender email address itself or another designated account name.
• Password: The secret key or password associated with the username for logging into the email service. This is essential for authentication and securing the email transmission.

Once you have acquired this information, fill in the form displayed in the custom email section with the values from above and click "Save".

#Send a test email

Now that we've set up custom email and saved the settings, click the "Edit" button again. You will see a header at the bottom of the section named "Test SMTP server configuration".

In that component is a button labeled "Send test email". Click that button and wait for confirmation that the test email has been sent. Once you see the confirmation, go to the email that you logged into the Magic dashboard with.

The email should be sent from the sender email that you have input into your settings and should display the sender name you configured. This test is crucial to verify that the integration settings are correctly implemented and that the email system can successfully send emails. It also confirms that the email appears as intended in recipients’ inboxes, with the correct "From" email address and sender name.

So now we can confirm that your custom email provider is configured correctly and working as intended!

#Test using your own client

We've tested it works from the Magic dashboard, but now we should test it from our own client to ensure that it works correctly. Let's use the Magic CLI tool to scaffold a Next.js app and test our email functionality.

Run the following command in your terminal. Replace <YOUR_PUBLISHABLE_API_KEY> with your Magic publishable API key.

01npx make-scoped-magic-app \\\\

02 --template nextjs-dedicated-wallet \\\\

03 --network ethereum-sepolia \\\\

04 --login-methods EmailOTP \\\\

05 --publishable-api-key <YOUR_PUBLISHABLE_API_KEY>

Once your applications dependencies have been installed, the server will start and be accessible at port 3000. If you head to http://localhost:3000 you will see a "Email OTP Login" form. Log in with the desired email address and head over to that inbox. You should have received an email labeled "Log in to Awesome Magic app". In this email is a one-time code that will be used to log the user in.

Pay attention to the sender information. This should be the information that you previously set in the Magic dashboard for your custom email provider. If the email sender and name matches what you submitted, we can now confirm your custom email provider is working correctly!

Thats it! You have just configured your Magic application to use a custom email provider!

#Next steps

You now know how to integrate Magic into your project and include the following features:

1. Simple authentication with Email OTP
2. Custom email provider

Feel free to explore Magic's other email features such as email logs and custom email templates!