auth

Widget ❌ Theme ✅ Options ✅ Content & Translations

This component is not a layout-component but componentOptions in the auth object at widget level.

To edit the Look & Feel of the Login Modal, send a PATCH request on /widgets/{id} and specify the following options in the componentOptions object property:

Common to One-Time Password and Magic Link Login modals

Option	Description	Example
backgroundColor	Button background and link color	ComponentOptionValue
color	Button text color	ComponentOptionValue
modal	Style of the Login Modal and the container (box)	DidomiStyle
image	Logo in the Login Modal	DidomiStyle
incorrectEmailText	Error message in case of invalid format of email address prompted (By default * Your email address is incorrect).	DidomiTextOptions
titleText	Title of Login modal (By default * Manage your consents)	DidomiTextOptions
stepOneGuideLineText	Second title of Login modal in email address step (By default * Please login in)	DidomiTextOptions

OTP Login modal

Option	Description	Example
otpLoginResendLink	Container of send a new code (<a>).	DidomiStyle
sendNewCodeButtonText	Text of button to send a new code.	DidomiTextOptions
otpLoginDescriptionStepTwo	Description above the code input to guide the user.	DidomiTextOptions
codeNotValidErrorMessage	Error message displayed to the user when the code prompted is not valid.	DidomiTextOptions
verifyCodeButton	Button in step 2 to submit the code.	DidomiButtonOptions
otpLoginDescriptionStepOne	Description above the email input to guide the user.	DidomiTextOptions
authButton		DidomiButtonOptions
loader	Loader in the submit button displayed when waiting for response.	DidomiStyle
descriptionTextWrapper	Container of description text positioned above email and code inputs.	DidomiStyle
codeFormFieldOptions	Code input options.	DidomiFormFieldsOptions
emailFormFieldOptions	Email address input options.	DidomiFormFieldsOptions

Magic Link Login modal

Option	Description	Example
resendEmailText	Text button to re-send email	DidomiTextOptions
linkSentInfoText	Email sent confirmation (By default * A link to manage your consents has been sent to you, please check your email address. Haven't received anything? )	DidomiTextOptions
stepTwoGuideLineText	Secondary title of Login modal in confirmation step (By default * A link is on it's way)	DidomiTextOptions
inputLabelText	Label of email input (By default * Email address)	DidomiTextOptions

* Available by default if SDK is used. When building the authentication workflow with Didomi APIs, translations from SDK will not be available.

PATCH https://api.didomi.io/widgets/{id}?organization_id=YOUR_ORG_ID

{
  "auth": {
      "method": "email",
      "providerId": "",
      "componentOptions": {
          "backgroundColor": "",
          "color": "",
          "modal": {
              "style": {
                  "default": {
                      "backgroundColor": "",
                      "padding": "",
                      "borderRadius": "",
                      "borderWidth": ""
                  }
              },
              "box": {
                  "style": {
                      "default": {
                          "backgroundColor": "",
                          "padding": "",
                          "borderRadius": "",
                          "borderWidth": ""
                      }
                  }                    
              }
          },
          "image": {
              "src": "",
              "style": {
                      "default": {
                          "width": "",
                          "height": ""
                      }
              }           
          },
          "incorrectEmailText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }
          },
          "inputLabelText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "titleText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "stepOneGuideLineText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "otpLoginResendLink": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                       
          },
          "sendNewCodeButtonText": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "otpLoginDescriptionStepTwo": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "codeNotValidErrorMessage": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }                
          },
          "verifyCodeButton": {
              "style": {
                  "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": ""
                  }
              },
              "text": {
                  "style": {
                      "default": {
                          "color": "",
                          "fontSize": ""
                      }
                  }
              }                
          },
          "otpLoginDescriptionStepOne": {
              "style": {
                  "default": {
                      "color": "",
                      "fontSize": ""
                  }
              }              
          },
          "authButton": {
              "style": {
                  "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": ""
                  }
              },
              "text": {
                  "style": {
                      "default": {
                          "color": "",
                          "fontSize": ""
                      }
                  }
              }                
          },
          "descriptionTextWrapper": {
              "style": {
                  "default": {
                      "backgroundColor": ""
                  }
              }                
          },
          "codeFormFieldOptions": {
              "label": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }
              },
              "errorMessage": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }                
              },
              "inputOptions": {
                  "fontColor": "",
                  "fontSize": "",
                  "fontWeight": "",
                  "lineHeight": "",
                  "borderRadius": "",
                  "borderColor": "",
                  "borderWidth": "",
                  "errorBorderColor": "",
                  "placeholderColor": "",
                  "backgroundColor": ""
              }                
          },
          "emailFormFieldOptions": {
              "label": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }
              },
              "errorMessage": {
                  "style": {
                      "default": {
                          "color": ""
                      }                
                  }                
              },
              "inputOptions": {
                  "fontColor": "",
                  "fontSize": "",
                  "fontWeight": "",
                  "lineHeight": "",
                  "borderRadius": "",
                  "borderColor": "",
                  "borderWidth": "",
                  "errorBorderColor": "",
                  "placeholderColor": "",
                  "backgroundColor": ""
              }
          }
      },
      "hideIfNotAuthenticated": false
  }
}