The Login widget adds a sign-in experience to your app. The widget is a button that allows users to sign in and sign out of ArcGIS accounts. Clicking the button does different things depending on whether the user is already signed in or not, and depending on which behaviors you configure in the widget settings.
-
When users click the widget to sign in, the widget can either open a pop-up sign-in window or redirect to an ArcGIS sign-in page.
-
When users click the widget while already signed in, the widget can either sign them out directly or open a drop-down menu with options.
You can set up redirects that send users to a specific app page, view, window, or external URL after signing in or signing out. You can also customize the appearance of the widget and the drop-down menu.
Examples
Use this widget to support app design requirements such as the following:
-
You want to require that users sign in before they access an app.
-
You want to create a home page with a login button and redirect users to another page after they sign in to an account.
-
You want to allow users to switch accounts.
Usage notes
When you add a Login widget to a page, the Quick style window appears. You can select from preset designs that coordinate with your app's theme. (To access this window again later, click the Quick style button 
on the widget toolbar.) You can further customize the widget's appearance in Appearance settings.
The Login widget toolbar includes the Toggle sign-in preview button 
. You can use this button to switch between previewing the widget in the signed-in state and signed-out state.
Settings
The Login widget includes the following settings:
-
Sign-in page display—Choose a behavior for when the user clicks the widget button while not signed in:
-
Popup window—A window appears and prompts the user to sign in.
-
Redirect to sign in page—The widget redirects the user to an ArcGIS sign-in page. Once the user signs in with a valid account, they return to the app.
-
-
Post sign-in settings—Configure the following settings related to widget behavior after the user is signed in:
-
Redirect after signing in—Optionally, add a link to send users to a specific page, view, or window in your app, or go to a web address, immediately after a successful login. If you link to a web address, enter a URL (that begins with
https). You can choose whether to have the redirect open in the same window as the app, the top window, or a new window.:// -
Redirect after signing out—Optionally, add a link to send users to a specific page, view, or window in your app, or go to a web address, immediately after a successful logout. If you link to a web address, enter a URL (that begins with
https). You can choose whether to have the redirect open in the same window as the app, the top window, or a new window.:// -
On sign-in button click—Choose a behavior for when the user clicks the widget while they are signed in:
-
Sign out directly—The widget signs the user out of their account.
-
Enable user menu—A drop-down menu appears when the user clicks the button. The menu always includes the Switch accounts and Sign out options. You can choose to include the following additional elements and options:
-
Show user name—Include the account profile name in the menu.
-
Show user avatar—Include the account avatar image in the menu.
-
Show "My profile"—Include a link to the account profile page.
-
Show "My settings"—Include a link to the account settings page.
-
Show restricted resources (if any)—Include a list of resources in the app that the current account cannot access.
-
Add a link—Add a link to the drop-down menu. For each link, you can enter a label and an
httpsURL.://
-
-
-
-
Appearance—Change the appearance of the Login widget.
-
Icon—Add an icon to the login button. This icon appears when the user is signed out. The user avatar appears when the user is signed in to their account. You can choose icons from the default galleries or upload your own icon from a file.
-
You can override the font and colors inherited from the app's theme to style the widget's two states. Default is the state of the widget without user interaction and Hover is the state initiated by the user when they point to or click the widget. You can adjust the following settings:
-
Text—Change the font size (in pixels) and font color, and style the widget text using bold, italic, strikethrough, and underline formatting.
-
Icon—Change the size (in pixels) and color of the widget icon.
-
Background—Choose a fill color or image to set as the widget's background. If you choose an image, you can position it in the widget using Fit, Fill, Center, Tile, or Stretch. If you choose Fit, the widget displays the background fill color around the image.
-
Border—Choose a border color, style (such as dashed or dotted), and width in pixels. You can style all sides of the border at the same time or style each of them separately.
-
Border radius—Change the radius size (in pixels or percent) to shape the widget corners.
-
Shadow—Add a shadow effect around the widget using the following settings:
-
Offset X—Set the horizontal distance of the shadow. A negative value places the shadow to the left of the button and a positive value places it to the right.
-
Offset Y—Set the vertical distance of the shadow. A negative value places the shadow above the button and a positive value places it below.
-
Blur radius—Apply a blur effect to the shadow.
-
Spread radius—Adjust the size of the shadow.
-
Color—Select a shadow color.
-
-
Dropdown menu—Change the appearance of the drop-down menu that appears if you turn on the Enable user menu setting:
-
Text—Change the font size (in pixels) and font color, and style the menu text using bold, italic, strikethrough, and underline formatting.
-
Background—Choose a fill color or image to set as the menu's background. If you choose an image, you can position it in the menu using Fit, Fill, Center, Tile, or Stretch. If you choose Fit, the menu displays the background fill color around the image.
-
Border—Choose a border color, style (such as dashed or dotted), and width in pixels. You can style all sides of the border at the same time or style each of them separately.
-
Shadow—Add a shadow effect around the menu using the following settings:
-
Offset X—Set the horizontal distance of the shadow. A negative value places the shadow to the left of the button and a positive value places it to the right.
-
Offset Y—Set the vertical distance of the shadow. A negative value places the shadow above the button and a positive value places it below.
-
Blur radius—Apply a blur effect to the shadow.
-
Spread radius—Adjust the size of the shadow.
-
Color—Select a shadow color.
-
-
-
-