The Sign-in template supports 4 sign-in methods: Provider sign-in,
username and password, PIN code, and QR code.
Provider sign-in method: This method lets users
sign in using a provider, with no input required. In this example (for Android
Auto), Google is the provider for the primary sign-in option, with PIN code
and email sign-in offered as secondary options.Username/password method: This method lets users
enter authentication information in a single, mandatory form field. This field
can be used to enter a username or password. In this example (for Android
Auto), the other methods are offered as secondary options.
QR code method: This method displays a mandatory
PIN code (up to 12 characters in length) provided by the app and instructions
for where the user should enter it. The code can be refreshed as needed if it
times out. (Android Auto example)PIN method: This method displays a mandatory PIN
code (up to 12 characters in length) provided by the app and instructions for
where the user should enter it. The code can be refreshed as needed if it
times out. (Android Auto example)
Sign-in example templates
When the car is parked, the user can access the keyboard to type a
username or password. (Android Auto example)When the user is driving, the sign-in content is not shown, to
prevent driver distraction. For these situations, it's helpful to provide a
button with an alternative option, such as skipping sign-in and using the app
in guest mode. (Android Auto example)
Sign-in template UX requirements
App developers:
MUST
Include a sign-in method when using this template.
SHOULD
Use input fields only for user sign-in, not for collecting other types
of user input.
SHOULD
Prioritize the shortest flow (using the fewest clicks).
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eThe Sign-in template provides options for users to sign in to the app while the car is parked, enhancing user experience and safety.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can choose from four sign-in methods: Provider sign-in, Username/password, PIN code, and QR code, offering flexibility in user authentication.\u003c/p\u003e\n"],["\u003cp\u003eThe template includes customizable elements such as header, action strip, primary text, and buttons for branding and functionality.\u003c/p\u003e\n"],["\u003cp\u003eSign-in content is hidden while driving to minimize distractions, with alternative options like guest mode for continued app usage.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers must include at least one sign-in method and are encouraged to prioritize the shortest, most popular flow for optimal usability.\u003c/p\u003e\n"]]],[],null,["# Sign-in template\n\n\u003cbr /\u003e\n\nThe Sign-in template presents options for signing in to the app while\nparked.\n\nYou can choose from 4 possible [sign-in methods](#methods). \n**Includes:**\n\n- [Header](/cars/design/create-apps/apps-for-drivers/components/header) with optional [action strip](/cars/design/create-apps/apps-for-drivers/components/action-strip)\n- Up to 2 lines of primary text (optional)\n- Primary sign-in method\n- Additional text, such as disclaimers and links to terms of service (optional)\n- Up to 2 [buttons](/cars/design/create-apps/apps-for-drivers/components/button) (optional)\n\n\u003cbr /\u003e\n\n| **Note:** This template displays its contents only when parked (see [Sign-in template examples](#examples)) and does not increase the step count.\n\nSign-in methods\n---------------\n\nThe Sign-in template supports 4 sign-in methods: Provider sign-in,\nusername and password, PIN code, and QR code.\n**Provider sign-in method**: This method lets users sign in using a provider, with no input required. In this example (for Android Auto), Google is the provider for the primary sign-in option, with PIN code and email sign-in offered as secondary options. **Username/password method**: This method lets users enter authentication information in a single, mandatory form field. This field can be used to enter a username or password. In this example (for Android Auto), the other methods are offered as secondary options. \n**QR code method**: This method displays a mandatory PIN code (up to 12 characters in length) provided by the app and instructions for where the user should enter it. The code can be refreshed as needed if it times out. (Android Auto example) **PIN method**: This method displays a mandatory PIN code (up to 12 characters in length) provided by the app and instructions for where the user should enter it. The code can be refreshed as needed if it times out. (Android Auto example)\n\n\u003cbr /\u003e\n\nSign-in example templates\n-------------------------\n\nWhen the car is parked, the user can access the keyboard to type a username or password. (Android Auto example) When the user is driving, the sign-in content is not shown, to prevent driver distraction. For these situations, it's helpful to provide a button with an alternative option, such as skipping sign-in and using the app in guest mode. (Android Auto example)\n\n\u003cbr /\u003e\n\nSign-in template UX requirements\n--------------------------------\n\nApp developers:\n\n|------------|---------------------------------------------------------------------------------------|\n| **MUST** | Include a sign-in method when using this template. |\n| **SHOULD** | Use input fields only for user sign-in, not for collecting other types of user input. |\n| **SHOULD** | Prioritize the shortest flow (using the fewest clicks). |\n| **SHOULD** | Prioritize the most popular method. |"]]
