Authenticate Using Twitter in JavaScript

You can let your users authenticate with Firebase using their Twitter accounts by integrating Twitter authentication into your app. You can integrate Twitter authentication either by using the Firebase SDK to carry out the sign-in flow, or by carrying out the Twitter OAuth flow manually and passing the resulting access token and secret to Firebase.

Before you begin

1. Add Firebase to your JavaScript project .
2. In the Firebase console , open the Auth section.
3. On the Sign in method tab, enable the Twitter provider.
4. Add the API key and API secret from that provider's developer console to the provider configuration:
   1. Register your app as a developer application on Twitter and get your app's OAuth API key and API secret .
   2. Make sure your Firebase OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler ) is set as your Authorization callback URL in your app's settings page on your Twitter app's config .
5. Click Save .

Handle the sign-in flow with the Firebase SDK

If you are building a web app, the easiest way to authenticate your users with Firebase using their Twitter accounts is to handle the sign-in flow with the Firebase JavaScript SDK. (If you want to authenticate a user in Node.js or other non-browser environment, you must handle the sign-in flow manually.)

To handle the sign-in flow with the Firebase JavaScript SDK, follow these steps:

1. Create an instance of the Twitter provider object:

   Web

    import 
     
    { 
     
    TwitterAuthProvider 
     
    } 
     
    from 
     
    "firebase/auth" 
    ; 
    const 
     
    provider 
     
    = 
     
    new 
     
    TwitterAuthProvider 
    (); 
    
     auth_twitter_provider_create 
    . 
    js 
    
    
   

   Web

    var 
     
    provider 
     
    = 
     
    new 
     
    firebase 
    . 
    auth 
    . 
    TwitterAuthProvider 
    (); 
    
     twitter 
    . 
    js 
    
    
   

2. Optional: To localize the provider's OAuth flow to the user's preferred language without explicitly passing the relevant custom OAuth parameters, update the language code on the Auth instance before starting the OAuth flow. For example:

   Web

    import 
     
    { 
     
    getAuth 
     
    } 
     
    from 
     
    "firebase/auth" 
    ; 
    const 
     
    auth 
     
    = 
     
    getAuth 
    (); 
    auth 
    . 
    languageCode 
     
    = 
     
    'it' 
    ; 
    // To apply the default browser preference instead of explicitly setting it. 
    // auth.useDeviceLanguage(); 
    auth_set_language_code.js