Skip to content

Instantly share code, notes, and snippets.

@abbaspour
Last active May 8, 2022 12:32
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abbaspour/2245b215249560d42d8138ab0c33a1f7 to your computer and use it in GitHub Desktop.
Save abbaspour/2245b215249560d42d8138ab0c33a1f7 to your computer and use it in GitHub Desktop.
Auth0 MFA Widget i18n
<!DOCTYPE html>
<html>
<head>
<title>2nd Factor Authentication</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
html, body { padding: 0; margin: 0; }
.table {
display: table;
position: absolute;
height: 100%;
width: 100%;
background-color: #2b2b33;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.content {
padding: 25px 0px 25px 0px;
margin-left: auto;
margin-right: auto;
width: 280px; /* login widget width */
}
</style>
</head>
<body>
<div class="table">
<div class="cell">
<div class="content">
<!-- WIDGET -->
<div class="js-mfa-container mfa-container" id="container"></div>
</div>
</div>
</div>
<script src="//cdn.auth0.com/js/mfa-widget/mfa-widget-1.6.min.js"></script>
<script>
(function() {
i18n = {
'en': {
defaults: {
iddleHelpUrl: '#',
rememberBrowserCheckbox: 'Remember this browser',
title: 'Welcome to {tenantName}'
},
downloadApp: {
headerText: 'Download Auth0 Guardian for free:',
pushEnrollmentAction: 'I\'ve already downloaded it',
smsAndTotpEnrollmentActions: 'I\'d rather use <sms>SMS</sms> or <ga>Google Authenticator</ga>',
totpEnrollmentActions: 'I\'d rather use <ga>Google Authenticator</ga>',
smsEnrollmentActions: 'I\'d rather use <sms>SMS</sms>',
iosLabel: 'App Store',
iosUrl: 'https://itunes.apple.com/us/app/auth0-guardian/id1093447833?ls=1&mt=8',
iosImg: '<svg width="27px" height="33px" viewBox="37 22 27 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="auth0-mfa-svg-icon"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(37.000000, 22.000000)"><path d="M22.0964148,17.5965957 C22.0594667,13.4821277 25.4586963,11.4804255 25.6141333,11.387234 C23.6890074,8.57489362 20.7051259,8.1906383 19.656563,8.16 C17.1504593,7.89574468 14.7195259,9.66255319 13.4429037,9.66255319 C12.1408,9.66255319 10.1749037,8.18553191 8.05611852,8.22893617 C5.3296,8.27106383 2.7789037,9.85276596 1.37997037,12.3089362 C-1.50708148,17.3170213 0.646103704,24.6765957 3.41211852,28.7246809 C4.79576296,30.707234 6.41256296,32.9208511 8.5288,32.8429787 C10.5991704,32.7574468 11.3725333,31.5204255 13.8709926,31.5204255 C16.3465185,31.5204255 17.0727407,32.8429787 19.2310222,32.7931915 C21.4530074,32.7574468 22.8519407,30.8017021 24.1871704,28.8012766 C25.7861333,26.5289362 26.4282667,24.2910638 26.4537481,24.1761702 C26.4015111,24.1582979 22.1384593,22.5280851 22.0964148,17.5965957 L22.0964148,17.5965957 Z" fill="#FFFFFF"></path><path d="M18.0193778,5.49702128 C19.1329185,4.10170213 19.8948148,2.20340426 19.6833185,0.277021277 C18.0716148,0.348510638 16.0560296,1.39404255 14.8953481,2.7587234 C13.8684444,3.9612766 12.9511111,5.93234043 13.1880889,7.78595745 C14.9985481,7.9212766 16.8574222,6.8706383 18.0193778,5.49702128 L18.0193778,5.49702128 Z" fill="#FFFFFF"></path></g></svg>',
androidLabel: 'Google Play',
androidUrl: 'https://play.google.com/store/apps/details?id=com.auth0.guardian',
androidImg: '<svg width="30px" height="34px" viewBox="35 22 30 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="auth0-mfa-svg-icon"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(35.000000, 22.000000)"><polygon fill="#ffffff" points="0.0311829399 32.9244984 0.0311829399 1.02956758 16.5681333 17.6173695"></polygon><polygon fill="#ffffff" points="0.60957618 0.0196753921 17.3854403 16.8471259 22.6948251 11.782715"></polygon><polygon fill="#ffffff" transform="translate(11.025248, 26.014581) scale(1, -1) translate(-11.025248, -26.014581)" points="0.60957618 18.1008562 17.3854403 33.9283067 21.4409189 29.8631472"></polygon><path d="M18.3964257,17.493946 L23.8211074,12.6992188 L28.7813766,15.7894686 C29.3871829,16.1668862 29.4042508,16.7930368 28.8086222,17.1953618 L22.3003286,21.5914726 L18.3964257,17.493946 Z" fill="#ffffff"></path></g></svg>'
},
pushAuth: {
pushSent: {
useTotpFallback: 'If you haven\'t received the notification,<br></br>just <manualInput>enter the code</manualInput> manually.'
},
pushTimeout: {
resendAction: 'Resend push notification',
timeoutText: 'Didn\'t receive the push notification?',
useRecoveryCode: 'Lost your device? <recovery>Use the recovery code</recovery>',
useTotpFallback: '<manualInput>Enter the code manually</manualInput>'
}
},
totpAuth: {
codePlaceholder: 'Enter the 6-digit code',
headerText: 'Get a verification code from the Google Authenticator (or similar) app:',
useRecoveryCode: 'Lost your device? <recovery>Use the recovery code</recovery>'
},
smsAuth: {
codePlaceholder: 'Enter the 6-digit code',
headerText: 'Enter the 6-digit code we\'ve just sent to your phone.',
useRecoveryCode: 'Lost your device? <recovery>Use the recovery code</recovery>'
},
guardianTotpAuth: {
codePlaceholder: 'Enter the 6-digit code',
headerText: 'Get a verification code from the Auth0 Guardian app.'
},
recoveryCodeAuth: {
codePlaceholder: 'Enter your code here',
headerText: 'We will generate a new recovery code<br />once you\'ve logged in:'
},
pushEnrollment: {
headerText: 'Scan this code with Auth0 Guardian:'
},
enrollmentCongrats: {
congrats: 'Congratulations, you are all set.<br />In the future when logging in you\'ll want your device handy.',
continueButtonText: 'Continue'
},
reportRecoveryCode: {
headerText: 'In the event that you need to login without your device you\'ll need a recovery code. Take a note and keep this somewhere safe:',
confirmationLabel: 'I have safely recorded this code'
},
generalError: {
errorsRecoveryHelp: {
default: 'Looks like something went wrong.<br />Please try logging in again from the application.',
globalTransactionExpired: 'The login was not successful.<br />Please try again.',
// Auth0 Server Errors
guardianInvalidNonce: 'Please try logging in again from the application.',
guardianInvalidToken: 'Please try logging in again from the application.',
invalidLoginTokenStatus: 'Please try logging in again from the application.',
loginTokenInvalidSignature: 'Please try logging in again from the application.',
loginTokenTransactionExpired: 'Please try logging in again from the application.'
}
},
smsEnrollmentConfirm: {
codePlaceholder: 'Enter the 6-digit code',
headerText: 'In order to confirm enrollment we need to confirm your phone. Please enter the received code.'
},
totpEnrollment: {
codePlaceholder: 'Enter your passcode here',
headerText: 'Scan this QR code with Google Authenticator (or similar) app:'
},
smsEnrollmentAddPhoneNumber: {
headerText: 'Please enter your phone<br />in order to enroll.',
phoneNumberLabel: 'A code will be sent to this number:',
phoneNumberPlaceholder: 'Your phone number'
// countryCodes: { 'US': 'Translation of United States', ... '<country code>': '<translation>' }
},
authCongrats: {
congrats: 'We have verified your identity. Redirecting...',
congratsNoRedirect: 'We have verified your identity.',
continueButtonText: 'Continue'
},
errorMessages: {
alreadyEnrolled: 'You are already enrolled, cannot enroll again',
authMethodDisabled: 'The specified authentication method is disabled',
connectionError: 'Looks like we cannot contact our server. Please check your internet connection and retry.',
default: 'Looks like something went wrong. Please retry.',
defaultRequest: 'Looks like we found a problem contacting our server. Please retry.',
enrollmentConflict: 'Seems that you have already enrolled. Try logging in again from the application.',
enrollmentMethodDisabled: 'The specified enrollment method is disabled',
enrollmentNotFound: 'We couldn\'t find your enrollment. You\'ve probably started enrollment from another device. Finish it there or try logging in again from the application.',
enrollmentTransactionNotFound: 'The mfa enrollment transaction is not active or has expired. Please try again.',
errorSendingPushNotification: 'We found an error sending your notification. Please try again.',
errorSendingPushNotificationManualFallback: 'We could not send the push. Please enter the code manually.',
errorSendingSms: 'We found an error sending your code. Please try again in a few seconds.',
errorSendingSmsManualFallback: 'We could not send the sms. Please try the recovery code.',
featureDisabled: 'This module is currently disabled.',
featureDisabledByAdmin: 'This module was disabled by the admin.',
fieldRequired: 'Please fill out required field.',
globalTransactionExpired: 'Your login attempt has timed out.',
guardianInvalidNonce: 'There was a problem authenticating your request origin. Have you started too many parallel logins?',
guardianInvalidToken: 'There was a problem validating authentication request format.',
insufficientScope: 'Seems that you are not authorized to perform this action.',
invalidBearerFormat: 'Seems that you are not authorized to perform this action.',
invalidLoginTokenStatus: 'Unexpected state validating your request.',
invalidOtp: 'Seems that your code is not valid, please check and retry.',
invalidOtpFormat: 'OTP Code must have 6 numeric characters',
invalidPhoneNumber: 'Seems that your phone number is not valid. Please check and retry.',
invalidRecoveryCode: 'Seems that your recovery code is not valid. Please check and try again.',
invalidRecoveryCodeFormat: 'Recovery code must have 24 alphanumeric characters',
invalidToken: 'Seems that you are not authorized to perform this action.',
loginRejected: 'Auth has been rejected. Try again.',
loginTokenInvalidSignature: 'We cannot verify who seems to be the issuer for this request',
loginTokenTransactionExpired: 'Your authentication request is expired. Is your connection slow?',
loginTransactionNotFound: 'Seems that your device has taken too long to login. Please try again.',
noMethodAvailable: 'There is currently no authentication method available.',
noPublicKeyAvailable: 'We cannot verify your identity. Contact tenant admin.',
pnEndpointDisabled: 'Seems that we cannot deliver messages to your cell phone. Please try again.',
pushNotificationNotConfigured: 'Seems that enrollment was not finished. Please try logging in again from the application.',
pushNotificationWrongCredentials: 'Seems that your device credentials are outdated. Please re-enroll your device or wait for them to be updated.',
smsNotConfigured: 'You cannot use this module because you\'ve enrolled with a different one.',
socketError: 'We cannot connect to real time channel.',
// tenant_not_found | The tenant associated cannot be found. Should not normally hapen at least that you delete the tenant
tooManyPn: 'You have exceeded the amount of push notifications per minute. Please wait and try again.',
tooManyPnPerTenant: 'There are too many push requests right now. Wait a few minutes and try again.',
tooManySms: 'You have exceeded the amount of SMSs per hour. Wait a few minutes and try again.',
tooManySmsPerTenant: 'There are too many SMSs right now. Wait a few minutes and try again.'
// | transaction_expired | The transaction has already expired |
},
successMessages: {
auth: 'We have successfully verified your identity. Redirecting...',
pushSent: 'We\'ve sent a push to: {enrollmentName}',
smsSent: 'We\'ve sent an sms to: {phoneNumber}'
},
infoMessages: {
iddle: 'Can we help you?<br></br><iddleHelp>Click here to learn more</iddleHelp>'
}
}
};
function getLanguageDictionary() {
var lang = 'en';
return i18n[lang];
}
return new Auth0MFAWidget({
container: "container",
theme: {
icon: '//cdn.auth0.com/blog/react-js/react.png',
primaryColor: "#ea5323"
},
languageDictionary: getLanguageDictionary(),
requesterErrors: [
{% for error in errors %}
{ message: "{{ error.message }}", errorCode: "{{ error.code }}" }
{% endfor %}
],
mfaServerUrl: "{{ mfaServerUrl }}",
{% if ticket %}
ticket: "{{ ticket }}",
{% else %}
requestToken: "{{ requestToken }}",
{% endif %}
postActionURL: "{{ postActionURL }}",
userData: {
userId: "{{ userData.userId }}",
email: "{{ userData.email }}",
friendlyUserId: "{{ userData.friendlyUserId }}",
tenant: "{{ userData.tenant }}",
{% if userData.tenantFriendlyName %}
tenantFriendlyName: "{{ userData.tenantFriendlyName }}"
{% endif %}
},
globalTrackingId: "{{ globalTrackingId }}",
{% if allowRememberBrowser %}allowRememberBrowser: {{ allowRememberBrowser }}, {% endif %}
{% if stateCheckingMechanism %}stateCheckingMechanism: "{{ stateCheckingMechanism }}", {% endif %}
});
})();
</script>
</body>
</html>
@matejstrasek
Copy link

Wonderful! Thanks! 🚀

@shivamvinsol
Copy link

Thanks. You should add this to the documentation as well.

@vishwac09
Copy link

Thanks a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment