Search code examples
cssuser-interfaceresponsive-designgoogle-identity-toolkit

How to customize the sign-in button provided by Gitkit?

The Google Identity Toolkit (Gitkit) provides a convenient widget with the id 'navbar' that initially serves as a sign-in button and once the user signs in, it becomes a user info card. This is what it looks like: Gitkit navbar widget

On clicking this user info card, a dropdown list containing links to an account management page and a sign-out function is shown.

The problem is that this user info card is too wide for a mobile screen and I want to customize it to look like the Gmail user-info widget that shows up just as a small circle containing the profile picture and upon clicking reveals an overlay containing both user info and account management links as shown below:

Gmail account info and management widget

My question is: is there an easy way that I can customize the default Gitkit widget to look and behave like the Gmail widget or would I be better off creating a Gmail-like widget from scratch?

Solution

  • The identity toolkit provides the following methods:

    • google.identitytoolkit.signIn
    • google.identitytoolkit.manageAccount
    • google.identitytoolkit.signOut

    and to set the widget url and sign out url, etc. use: google.identitytoolkit.setConfig

    This should give you all the tools you need to build your own custom user card/ sign in button. The server libraries provided help you validate and retrieve the logged in user's info.

    Of course you can always override the user card css to customize how the menu is displayed.