Auth0 Home Blog Docs

Email templates: {{application.name}} defaulting to "[Your Application]"

lock
passwordless
passwordless-email

#1

Hi all,

A quick problem (I hope). I’ve recently turned on passwordless as a sign in option for my users.

I have the default setup, and the emails that are generated send the default string “[Your Application]” (including the square brackets) in place of what should be in the {{application.name}} liquid tag.

Oddly, the sender is marked correctly with my app name, but in the body of the HTML email the template is not pulling through the correct metadata for my app.

Here’s the code for the email. Is there something that I’m doing wrong somewhere or not seeing a setting to set the metadata that should be applied to generated emails?

I’ve looked in the docs here but can’t see any mention of this default text, nor can I see any mention of it in my application in the Auth0 admin area. https://manage.auth0.com/#/emails

Thanks in advance folks - hope it’s a very small thing to point me in the right direction!

Stef

Email template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td,img{line-height:100%}#outlook a{padding:0}.ExternalClass,.ReadMsgBody{width:100%}a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;height:auto;outline:0;text-decoration:none}table{border-collapse:collapse!important}#bodyCell,#bodyTable,body{height:100%!important;margin:0;padding:0;font-family:ProximaNova,sans-serif}#bodyCell{padding:20px}#bodyTable{width:600px}@font-face{font-family:ProximaNova;src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot);src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot?#iefix) format('embedded-opentype'),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:ProximaNova;src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot);src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot?#iefix) format('embedded-opentype'),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.woff) format('woff');font-weight:600;font-style:normal}@media only screen and (max-width:480px){#bodyTable,body{width:100%!important}a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:none!important}body{min-width:100%!important}#bodyTable{max-width:600px!important}#signIn{max-width:280px!important}}
</style>
  </head>
  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;font-family: &quot;ProximaNova&quot;, sans-serif;height: 100% !important;"><center>
  <table style="width: 600px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 0;font-family: &quot;ProximaNova&quot;, sans-serif;border-collapse: collapse !important;height: 100% !important;" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
      <td align="center" valign="top" id="bodyCell" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 20px;font-family: &quot;ProximaNova&quot;, sans-serif;height: 100% !important;">
      <div class="main">
        <p style="text-align: center;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; margin-bottom: 30px;">
          <img src="https://prismic-io.s3.amazonaws.com/makelight/3020a39a-8756-436c-af55-920193781997_makelight-petal-icon-512-with-whitespace.png" width="50" alt="Makelight" style="-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;">
        </p>
        
        <!-- Email change content -->
        {% if operation == 'change_email' %}

          <p style="font-size: 1.2em;line-height: 1.3;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">Your email address has been updated.</p>

        {% else %}

          <!-- Signup email content -->
          {% if send == 'link' or send == 'link_ios' or send == 'link_android' %}

            <p style="font-size: 1.2em;line-height: 1.3;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">Click and confirm that you want to sign in to {{ application.name }}. This link will expire in five minutes.</p>

            <div style="text-align:center">
            <a id="signIn" style="text-transform: uppercase;letter-spacing: 1px;color: #ffffff;text-decoration: none;display: inline-block;min-height: 48px;line-height: 48px;padding-top: 0;padding-right: 26px;padding-bottom: 0;margin: 20px 0;padding-left: 26px;border: 0;outline: 0;background: #eb5424;font-size: 14px;font-style: normal;font-weight: 400;text-align: center;white-space: nowrap;border-radius: 3px;text-overflow: ellipsis;max-width: 280px;overflow: hidden;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;" href="{{ link }}">Sign in to {{ application.name }}</a>
            </div>

            <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">Or sign in using this link:</p>
            <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"><a style="font-size: 12px; color: #A9B3BC; text-decoration: none;word-break: break-all;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;" href="{{ link }}">{{ link }}</a></p>

            {% elsif send == 'code' %}

            <p style="font-size: 1.4em; line-height: 1.3;">Your verification code is: <b>{{ code }}</b></p>

          {% endif %}

        {% endif %}

        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail.</p>

        <br>
        Thanks!
        <br>

        <strong>{{ application.name }}</strong>

        <br><br>
        <hr style="border: 2px solid #EAEEF3; border-bottom: 0; margin: 20px 0;">
        <p style="text-align: center;color: #A9B3BC;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
          If you did not make this request, please contact us by replying to this mail.
        </p>
      </div>
      </td>
    </tr>
  </table>
</center>
</body>
</html>

The resulting email showing the correct sender name but incorrect name in the body:


#2

In your settings for your app what does it have for “Name”? What type of application did you select when you set it up in the Dasboard? Do you have anywhere else in your code that might be setting that default parameter outside of ours?


#4

Hi @jeremy.meiss I found out the reason behind this. Until you turn on sending via a third party SMTP gateway or email provider, the metadata is mysteriously overridden by this setting. The problem is I wasn’t going to bother setting up the third party sending service until I’d validated that it was all working.

Could I suggest putting something in the documentation about this, and possibly on the page where you set up the email so that it is clear that the metadata is being silently overridden until you set up your provider?

That was a great experience until then, and at that point I very nearly bailed out of trying to use the feature because it appeared to be broken.


#5

@stefl glad you were able to solve the issue. This is great feedback and we can pass it to the right team to avoid confusion in the future!


#6

If this isn’t a bug on on the Auth0 email provider, might I suggest Auth0 make some changes to their claimed product offerings as well. Advertising Passwordless as a free-tier feature only to find out your app is always going to be called [Your Application] makes it… a bit useless.


#8

@joe.whittles have you specified a custom SMTP? and have you specified a from address specified? If either of those are missing the custom template may get skipped and that would be why you’re seeing [Your Application]


#9

I think it may have been a bug, because it was recently resolved without me even touching the config.