# auth `Widget` ❌ Theme ✅ Options ✅ Content & Translations {% hint style="info" %} This component is not a layout-component but componentOptions in the `auth` object at widget level. {% endhint %} 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](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#componentoptionvalue) | | `color` | Button text color | [ComponentOptionValue](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#componentoptionvalue) | | `modal` | Style of the Login Modal and the container (`box`) | [DidomiStyle](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomistyle) | | `image` | Logo in the Login Modal | [DidomiStyle](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomistyle) | | `incorrectEmailText` | Error message in case of invalid format of email address prompted (By default \* `Your email address is incorrect`). | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `titleText` | Title of Login modal (By default *\** `Manage your consents`) | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `stepOneGuideLineText` | Second title of Login modal in email address step (By default *\** `Please login in`) | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | #### OTP Login modal | Option | Description | Example | | ---------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | | `otpLoginResendLink` | Container of send a new code (``). | [DidomiStyle](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomistyle) | | `sendNewCodeButtonText` | Text of button to send a new code. | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `otpLoginDescriptionStepTwo` | Description above the code input to guide the user. | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `codeNotValidErrorMessage` | Error message displayed to the user when the code prompted is not valid. | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `verifyCodeButton` | Button in step 2 to submit the code. | [DidomiButtonOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomibuttonoptions) | | `otpLoginDescriptionStepOne` | Description above the email input to guide the user. | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `authButton` | | [DidomiButtonOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomibuttonoptions) | | `loader` | Loader in the submit button displayed when waiting for response. | [DidomiStyle](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomistyle) | | `descriptionTextWrapper` | Container of description text positioned above email and code inputs. | [DidomiStyle](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomistyle) | | `codeFormFieldOptions` | Code input options. | [DidomiFormFieldsOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomiformfieldoptions) | | `emailFormFieldOptions` | Email address input options. | [DidomiFormFieldsOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomiformfieldoptions) | #### Magic Link Login modal | Option | Description | Example | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | `resendEmailText` | Text button to re-send email | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#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](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `stepTwoGuideLineText` | Secondary title of Login modal in confirmation step (By default *\** `A link is on it's way`) | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | | `inputLabelText` | Label of email input (By default *\** `Email address`) | [DidomiTextOptions](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/options#didomitextoptions) | *\* Available by default if SDK is used. When building the authentication workflow with Didomi APIs, translations from SDK will not be available.* ```json 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 } } ```