Browser sign in flow

Updated on Sat, 2012-08-25 12:24

Overview

The browser sign in flow is appropriate for websites and applications which are able to open or embed a web browser. At a very high level:

  • The application renders a "Sign in with Twitter" link or button.
  • The user clicks the sign in button.
  • The current web browser is redirected to Twitter (or a new browser is opened and directed to Twitter).
  • The user completes a login and authorization step at Twitter if needed.
  • Twitter redirects back to an URL under the application's control, passing authorization information for the user.

Twitter keeps track of the authorizations, so for users already signed in to twitter.com who have authorized the application, no UI is shown - instead, they are automatically redirected back to the application.

Desktop flow

To demonstrate the flows, pretend the website pictured to the right ("The greatest website ever created") has implemented this API, as shown by the Sign in with Twitter button on the landing page.

When the user clicks the Sign in button, the page they see depends on whether they are signed in and whether they have previously allowed the application to access their account.

When the user is signed in to twitter.com but has not granted access, a list of requested permissions, along with Sign In and Cancel buttons are shown.

When the user is not signed in to twitter.com input fields for a username and password will be shown. Note that even if the user has already granted access to the application, the list of permissions will still be shown.

After the user inputs valid credentials (if needed) and clicks "Sign In", Twitter will redirect the user to the website which started the sign in flow.

In the case where the user is already signed in to twitter.com and has granted access to the website, this redirect happens immediately.

To learn how to implement this sign in flow, read Implementing Sign in with Twitter