Sign in with Google button UX

This page describes the user experience (UX) of the Sign in with Google button.

Button rendering

A personalized button displays profile information for the first Google session that approves your website. An approved Google session has a corresponding account on your website who has signed in using Sign In With Google before.

If a personalized button is displayed, the user knows the following:

• There's at least one active Google session.
• There's a corresponding account on your website.

A personalized button gives users a quick indication of the session status, both on Google's side and on your website, before they click the button. This is especially helpful to end users who visit your website only occasionally. They may forget whether an account has been created or not, and in which way. A personalized button reminds them that Sign In With Google has been used before. Thus, it helps to prevent unnecessary duplicate account creation on your website.

To indicate the session status, the personalized button is displayed in the following ways:

• One session: There's only one session on Google's side. That session approves the client, and there's a corresponding account on your website.

  

• Multiple sessions: There are multiple sessions on Google's side. Those sessions approve the client. The approval is indicated by the list arrow next to the displayed account. At least one session has a corresponding account on your website.

  

• No session: There's no session on Google's side, or none of the sessions have approved the client yet.

  

The personalized button is automatically displayed when the session status is suitable, unless your button settings don't allow the personalized button to be displayed. The personalized button is not displayed if:

• The data-type attribute is icon.
• The data-size attribute is set to medium or small.
• The data-width attribute is set to a number smaller than 200px.

The name or email address is ellipsized when they are too long to be displayed inside the button.

Key Point: The Code Generator developer tool can help you design the Sign In With Google button interactively and generate the code.

Key user journeys

Key Point: Whether a personalized button or a generic text button displays has no impact on the UX flows after the button is clicked. The account displayed in the personalized button is not automatically selected.

Key Point: The Sign in with Google button flow doesn't support automatic sign-in. A user action is required to select the right session, even when there is only one active Google session.

The user journeys vary based on the following statuses.

• Session status on Google websites. The following terms are used to indicate different Google session status when the user journey starts.

  • Has-Google-session: There is at least one active session on Google websites.
  • No-Google-session: There is no active session on Google websites.

• Whether the selected Google Account has approved your website when the user journey starts. The following terms are used to indicate different approval status.

  • New user: The selected account hasn't approved your website.
  • Returning user: The selected account has approved your website before.

Has-Google-session new user journey

1. The Sign in with Google button.

   

2. The account chooser page.

   

3. The new user consent page.

   

4. After the user confirms, an ID token is shared with your website.

Users can add a new Google session by clicking the Use another account button, refer to the No-Google-session user journeys, below.

Has-Google-session returning user journey

1. The Sign in with Google button.

   

2. The account chooser page.

   

3. After the user chooses a returning account, an ID token is shared with your website.

Users can add a new Google session by clicking the Use another account button, refer to the 'No-Google-session' user journeys, below.

No-Google-session new user journey

1. The Sign in with Google button.

   

2. The first page to add a new Google session.

   

3. The second page to add a new Google session.

   

4. The new user consent page.

   

5. After the user confirms, an ID token is shared with your website.

No-Google-session returning user journey

1. The Sign in with Google button.

   

2. The first page to add a new Google session.

   

3. The second page to add a new Google session.

   

4. After the user clicks the Next button, an ID token is shared with your website.

Family Link account key user journeys

The general key user journeys from the previous section still apply. The following shows the additional flow would be presented for child's Google Account when signing in.

No-Google-session

1. The Sign in with Google button.

   

2. The first page to add a new child Google session (child Google Account email).

   

3. The second page to add a new child Google session (child Google Account password).

   

4. The first page to get approval from parent to add a new child Google session.

   

5. The second page to get approval from parent to add a new child Google session.

   

6. The third page to get approval from parent to add a new child Google session.

   

7. The first page to get approval from parent to sign in a child Google Account to the application.

   

8. The second page to get approval from parent to sign in a child Google Account to the application.

   

9. The third page to get approval from parent to sign in a child Google Account to the application.

   

10. The final page to get approval from parent to sign in a child Google Account to the application.

    

11. After the parent clicks the Continue button, an ID token is shared with your website.

Has-Google-session

1. The Sign in with Google button.

   

2. The account chooser page.

   

3. The first page to get approval from parent to sign in a child Google Account to the application.

   

4. The second page to get approval from parent to sign in a child Google Account to the application.

   

5. The third page to get approval from parent to sign in a child Google Account to the application.

   

6. The final page to get approval from parent to sign in a child Google Account to the application.

   

7. After the parent clicks the Continue button, an ID token is shared with your website.