Console
    Start free

    Sign in users with GitHub

    This document shows you how to use Identity Platform to sign in users with GitHub.

    Before you begin

    This tutorial assumes you've already enabled Identity Platform, and have a basic web app written using HTML and JavaScript. To learn about how to enable Identity Platform and sign in, see Quickstart .

    Configure GitHub as a provider

    To configure GitHub as an identity provider:

    1. Go to the Identity Providers page in the Google Cloud console.

      Go to the Identity Providers page

    2. Click Add A Provider .
    3. Select GitHub from the list.
    4. Enter your GitHub Client ID and Client Secret . If you don't already have an ID and secret, you can obtain one from the GitHub Applications page.
    5. Configure the URI listed under Configure GitHub as a valid OAuth redirect URI for your GitHub app. If you configured a custom domain in Identity Platform, update the redirect URI in your GitHub app configuration to use the custom domain instead of the default domain. For example, change https://myproject.firebaseapp.com/__/auth/handler to https://auth.myownpersonaldomain.com/__/auth/handler .
    6. In the Project settings side pane, click Add Domain , and add your app's domain.

      We recommend that you don't include localhost in your production projects.

    7. In the Configure your application section, click Setup Details . Copy the snippet into your app's code to initialize the Identity Platform client SDK.
    8. Click Save .
    1. Create an instance of the GitHub provider object:

      Web version 9 

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

      Web version 8 

       var 
  
 provider 
  
 = 
  
 new 
  
 firebase 
 . 
 auth 
 . 
 GithubAuthProvider 
 (); 
 
        github 
 . 
 js
    2. Optional: Add OAuth scopes. Scopes specify what data you're requesting from GitHub. More sensitive data may require specific scopes. Consult the provider's documentation to determine what scopes your app needs.

      Web version 9 

       provider 
 . 
 addScope 
 ( 
 'repo' 
 ); 
 
        auth_github_provider_scopes 
 . 
 js

      Web version 8 

       provider 
 . 
 addScope 
 ( 
 'repo' 
 ); 
 
        github 
 . 
 js
    3. Optional: Localize the authentication flow. You can specify a language, or use the device's default language:

      Web version 9 

       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

    Web version 8 

     firebase 
 . 
 auth 
 (). 
 languageCode 
  
 = 
  
 'it' 
 ; 
 // To apply the default browser preference instead of explicitly setting it. 
 // firebase.auth().useDeviceLanguage(); 
     index.js
  • Optional: Specify additional custom OAuth parameters. These are specific to GitHub, and are typically used to customize the authentication experience. You can't pass parameters reserved by OAuth or Identity Platform.

    Web version 9 

     provider 
 . 
 setCustomParameters 
 ({ 
  
 'allow_signup' 
 : 
  
 'false' 
 }); 
 
      auth_github_provider_params 
 . 
 js

    Web version 8 

     provider 
 . 
 setCustomParameters 
 ({ 
  
 'allow_signup' 
 : 
  
 'false' 
 }); 
 
      github 
 . 
 js
  • Use the GitHub provider object to sign in the user. You can either open a pop-up window, or redirect the current page. Redirecting is easier for users on mobile devices.

    To show a pop-up, call signInWithPopup() :

    Web version 9 

     import 
  
 { 
  
 getAuth 
 , 
  
 signInWithPopup 
 , 
  
 GithubAuthProvider 
  
 } 
  
 from 
  
 "firebase/auth" 
 ; 
 const 
  
 auth 
  
 = 
  
 getAuth 
 (); 
 signInWithPopup 
 ( 
 auth 
 , 
  
 provider 
 ) 
  
 . 
 then 
 (( 
 result 
 ) 
  
 = 
>  
 { 
  
 // This gives you a GitHub Access Token. You can use it to access the GitHub API. 
  
 const 
  
 credential 
  
 = 
  
 GithubAuthProvider 
 . 
 credentialFromResult 
 ( 
 result 
 ); 
  
 const 
  
 token 
  
 = 
  
 credential 
 . 
 accessToken 
 ; 
  
 // The signed-in user info. 
  
 const 
  
 user 
  
 = 
  
 result 
 . 
 user 
 ; 
  
 // IdP data available using getAdditionalUserInfo(result) 
  
 // ... 
  
 }). 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle Errors here. 
  
 const 
  
 errorCode 
  
 = 
  
 error 
 . 
 code 
 ; 
  
 const 
  
 errorMessage 
  
 = 
  
 error 
 . 
 message 
 ; 
  
 // The email of the user's account used. 
  
 const 
  
 email 
  
 = 
  
 error 
 . 
 customData 
 . 
 email 
 ; 
  
 // The AuthCredential type that was used. 
  
 const 
  
 credential 
  
 = 
  
 GithubAuthProvider 
 . 
 credentialFromError 
 ( 
 error 
 ); 
  
 // ... 
  
 }); 
 
      auth_github_signin_popup 
 . 
 js

    Web version 8 

     firebase 
  
 . 
 auth 
 () 
  
 . 
 signInWithPopup 
 ( 
 provider 
 ) 
  
 . 
 then 
 (( 
 result 
 ) 
  
 = 
>  
 { 
  
 /** @type {firebase.auth.OAuthCredential} */ 
  
 var 
  
 credential 
  
 = 
  
 result 
 . 
 credential 
 ; 
  
 // This gives you a GitHub Access Token. You can use it to access the GitHub API. 
  
 var 
  
 token 
  
 = 
  
 credential 
 . 
 accessToken 
 ; 
  
 // The signed-in user info. 
  
 var 
  
 user 
  
 = 
  
 result 
 . 
 user 
 ; 
  
 // IdP data available in result.additionalUserInfo.profile. 
  
 // ... 
  
 }). 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle Errors here. 
  
 var 
  
 errorCode 
  
 = 
  
 error 
 . 
 code 
 ; 
  
 var 
  
 errorMessage 
  
 = 
  
 error 
 . 
 message 
 ; 
  
 // The email of the user's account used. 
  
 var 
  
 email 
  
 = 
  
 error 
 . 
 email 
 ; 
  
 // The firebase.auth.AuthCredential type that was used. 
  
 var 
  
 credential 
  
 = 
  
 error 
 . 
 credential 
 ; 
  
 // ... 
  
 }); 
 
      github 
 . 
 js

    To redirect the page, first call signInWithRedirect() .

    Follow the best practices when using signInWithRedirect , linkWithRedirect , or reauthenticateWithRedirect .

    Web version 9 

     import 
  
 { 
  
 getAuth 
 , 
  
 signInWithRedirect 
  
 } 
  
 from 
  
 "firebase/auth" 
 ; 
 const 
  
 auth 
  
 = 
  
 getAuth 
 (); 
 signInWithRedirect 
 ( 
 auth 
 , 
  
 provider 
 ); 
 
      auth_signin_redirect 
 . 
 js

    Web version 8 

     firebase 
 . 
 auth 
 (). 
 signInWithRedirect 
 ( 
 provider 
 ); 
 
      index 
 . 
 js

    Then, retrieve the GitHub token by calling getRedirectResult() when your page loads:

    Web version 9 

     import 
  
 { 
  
 getAuth 
 , 
  
 getRedirectResult 
 , 
  
 GithubAuthProvider 
  
 } 
  
 from 
  
 "firebase/auth" 
 ; 
 const 
  
 auth 
  
 = 
  
 getAuth 
 (); 
 getRedirectResult 
 ( 
 auth 
 ) 
  
 . 
 then 
 (( 
 result 
 ) 
  
 = 
>  
 { 
  
 const 
  
 credential 
  
 = 
  
 GithubAuthProvider 
 . 
 credentialFromResult 
 ( 
 result 
 ); 
  
 if 
  
 ( 
 credential 
 ) 
  
 { 
  
 // This gives you a GitHub Access Token. You can use it to access the GitHub API. 
  
 const 
  
 token 
  
 = 
  
 credential 
 . 
 accessToken 
 ; 
  
 // ... 
  
 } 
  
 // The signed-in user info. 
  
 const 
  
 user 
  
 = 
  
 result 
 . 
 user 
 ; 
  
 // IdP data available using getAdditionalUserInfo(result) 
  
 // ... 
  
 }). 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle Errors here. 
  
 const 
  
 errorCode 
  
 = 
  
 error 
 . 
 code 
 ; 
  
 const 
  
 errorMessage 
  
 = 
  
 error 
 . 
 message 
 ; 
  
 // The email of the user's account used. 
  
 const 
  
 email 
  
 = 
  
 error 
 . 
 customData 
 . 
 email 
 ; 
  
 // The AuthCredential type that was used. 
  
 const 
  
 credential 
  
 = 
  
 GithubAuthProvider 
 . 
 credentialFromError 
 ( 
 error 
 ); 
  
 // ... 
  
 }); 
 
      auth_github_signin_redirect_result 
 . 
 js

    Web version 8 

     firebase 
 . 
 auth 
 () 
  
 . 
 getRedirectResult 
 () 
  
 . 
 then 
 (( 
 result 
 ) 
  
 = 
>  
 { 
  
 if 
  
 ( 
 result 
 . 
 credential 
 ) 
  
 { 
  
 /** @type {firebase.auth.OAuthCredential} */ 
  
 var 
  
 credential 
  
 = 
  
 result 
 . 
 credential 
 ; 
  
 // This gives you a GitHub Access Token. You can use it to access the GitHub API. 
  
 var 
  
 token 
  
 = 
  
 credential 
 . 
 accessToken 
 ; 
  
 // ... 
  
 } 
  
 // The signed-in user info. 
  
 var 
  
 user 
  
 = 
  
 result 
 . 
 user 
 ; 
  
 // IdP data available in result.additionalUserInfo.profile. 
  
 // ... 
  
 }). 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle Errors here. 
  
 var 
  
 errorCode 
  
 = 
  
 error 
 . 
 code 
 ; 
  
 var 
  
 errorMessage 
  
 = 
  
 error 
 . 
 message 
 ; 
  
 // The email of the user's account used. 
  
 var 
  
 email 
  
 = 
  
 error 
 . 
 email 
 ; 
  
 // The firebase.auth.AuthCredential type that was used. 
  
 var 
  
 credential 
  
 = 
  
 error 
 . 
 credential 
 ; 
  
 // ... 
  
 }); 
 
      github 
 . 
 js

    • After you have an access token, you can use it to call the GitHub API. For example:

    REST

    curl  
-H  
 "Authorization: Bearer [TOKEN]" 
  
https://api.github.com/gists/starred

    If you don't want to use the client SDK, you can also handle the sign-in flow manually:

    1. Integrate GitHub authentication into your app by following the steps in their developer documentation .
    2. Sign in the user with GitHub using the flow you implemented in the previous step.
    3. Exchange the token you receive from GitHub for an Identity Platform credential:

      Web version 9 

       import 
  
 { 
  
 GithubAuthProvider 
  
 } 
  
 from 
  
 "firebase/auth" 
 ; 
 const 
  
 credential 
  
 = 
  
 GithubAuthProvider 
 . 
 credential 
 ( 
 token 
 ); 
 
        auth_github_provider_credential 
 . 
 js

      Web version 8 

       var 
  
 credential 
  
 = 
  
 firebase 
 . 
 auth 
 . 
 GithubAuthProvider 
 . 
 credential 
 ( 
 token 
 ); 
 
        github 
 . 
 js
    4. Use the credential to sign in the user with Identity Platform:

      Web version 9 

       import 
  
 { 
  
 getAuth 
 , 
  
 signInWithCredential 
  
 } 
  
 from 
  
 "firebase/auth" 
 ; 
 // Sign in with the credential from the user. 
 const 
  
 auth 
  
 = 
  
 getAuth 
 (); 
 signInWithCredential 
 ( 
 auth 
 , 
  
 credential 
 ) 
  
 . 
 then 
 (( 
 result 
 ) 
  
 = 
>  
 { 
  
 // Signed in 
  
 // ... 
  
 }) 
  
 . 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle Errors here. 
  
 const 
  
 errorCode 
  
 = 
  
 error 
 . 
 code 
 ; 
  
 const 
  
 errorMessage 
  
 = 
  
 error 
 . 
 message 
 ; 
  
 // The email of the user's account used. 
  
 const 
  
 email 
  
 = 
  
 error 
 . 
 customData 
 . 
 email 
 ; 
  
 // ... 
  
 }); 
 
        auth_signin_credential 
 . 
 js

      Web version 8 

       // Sign in with the credential from the user. 
 firebase 
 . 
 auth 
 () 
  
 . 
 signInWithCredential 
 ( 
 credential 
 ) 
  
 . 
 then 
 (( 
 result 
 ) 
  
 = 
>  
 { 
  
 // Signed in 
  
 // ... 
  
 }) 
  
 . 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle Errors here. 
  
 const 
  
 errorCode 
  
 = 
  
 error 
 . 
 code 
 ; 
  
 const 
  
 errorMessage 
  
 = 
  
 error 
 . 
 message 
 ; 
  
 // The email of the user's account used. 
  
 const 
  
 email 
  
 = 
  
 error 
 . 
 email 
 ; 
  
 // ... 
  
 }); 
 
        index 
 . 
 js

    What's next

    Design a Mobile Site
    View Site in Mobile | Classic
    Share by: