{"id":1866,"date":"2024-11-27T09:20:53","date_gmt":"2024-11-27T09:20:53","guid":{"rendered":"https:\/\/sparkminds.net\/?p=1866"},"modified":"2025-02-06T02:28:22","modified_gmt":"2025-02-06T02:28:22","slug":"social-login-integration-with-google-twitter-and-github-account","status":"publish","type":"post","link":"https:\/\/sparkminds.net\/vi\/social-login-integration-with-google-twitter-and-github-account\/","title":{"rendered":"Social Login Integration with Google, Twitter and Github Account"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

As we know, social login serves as a common feature in modern apps and websites. Check out our article to understand the steps to implement social login integration into an app or website. But first, let\u2019s move on to the definition and working principle before we get started.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

What is a Social login?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Social login is a process that allows users to use an existing account from any creatable social media platform (such as Facebook, Google, Twitter, etc.) to log into another application or website without registering for a new one.\u00a0<\/p>

And it’s convenient and fast for users to log in with ease. On top of that, it helps the applications and websites easily collect basic information about the users.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

How it works<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

The Social Login process is performed through OAuth \u2014 a protocol for access authorization. The app will require the user’s social account to access some information. After the user agrees, the social media platform will provide a token to the application that enables access to permitted information.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Social login configuration <\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

To accomplish social login integration, firstly, we have to create account and configure on social platforms that we want to use for login on our app or website, in this article that are Google, Twitter, and Github. Then, we will set up a third party for login verification, such as Firebase.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Config Google for social login integration<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
  1. Go to https:\/\/console.cloud.google.com<\/span><\/a>\/ and log in with your Google account.<\/li>
  2. After logging in, the interface will display as in the picture below. Click Select a project.<\/b><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    1. Click NEW PROJECT<\/strong><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      1. Fill in the information in the Project name<\/b>. Users will see this name when they continue to log in. Note that this name cannot be changed once it is set. The Location<\/b> section can be set as default. When you are done, click “Create”.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        1. Once you create a project successfully, the interface will be shown below. Click APIs & Services<\/strong>, and choose Credentials<\/strong>.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          1. Next, we need the Client ID configuration. This helps Google identify and verify your application, allowing it to authenticate and grant access to Google account information. However, you first need to configure the OAuth consent screen. This is a display screen when users grant the application access to their protected information, such as their Google account details. Click CONFIGURE CONSENT SCREEN<\/strong> on the right corner of the screen.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t
            1. External<\/strong>\u2192 allows all users with a Google account to use it.
              Internal<\/strong>\u2192 only allows users with a Google account within the same organization as you. In this case, we choose External<\/strong>.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t\t\t
              1. Fill in the information, the fields marked with (*) are mandatory information that must be entered. Choose SAVE AND CONTINUE<\/strong><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                \n\t\t\t\t
                \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                \n\t\t\t\t
                \n\t\t\t\t\t\t\t
                  \n \t
                1. In the Scopes<\/strong> tab, you will configure the details that your application will request from users. Next, click SAVE AND CONTINUE<\/strong> and choose BACK TO DASHBOARD<\/strong><\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                  \n\t\t\t\t
                  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                  \n\t\t\t\t
                  \n\t\t\t\t\t\t\t
                  1. After configuring the OAuth consent screen, move back to the Credentials tab and choose CREATE CREDENTIALS \u2192 OAuth client id. Select \u201cWeb application\u201d in the \u201cApplication type\u201d field.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                    \n\t\t\t\t
                    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                    \n\t\t\t\t
                    \n\t\t\t\t\t\t\t
                    1. Authorized JavaScript origins: This is the host address of your website.
                      Authorized redirect URIs: This is the URL to which users will be redirected after successful authentication. After filling in all the information as shown in the image, select CREATE.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                      \n\t\t\t\t
                      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                      \n\t\t\t\t
                      \n\t\t\t\t\t\t\t
                      1. After the Client ID has been created successfully, copy the Client ID and Client secret into .env file
                        VITE_GOOGLE_LOGIN_CLIENT_ID=Client ID VITE_GOOGLE_LOGIN_CLIENT_SECRET=Client secret\u00a0<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                        \n\t\t\t\t
                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                        \n\t\t\t\t
                        \n\t\t\t

                        Social login integration with Twitter<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                        \n\t\t\t\t
                        \n\t\t\t\t\t\t\t
                        1. Go to https:\/\/developer.x.com\/en<\/span><\/a> and register a developer account. The registration process is similar to creating a regular Twitter account.<\/li>
                        2. Once the registration is successful, the interface will display as shown below. By default, one application (app) will be created automatically for you.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                          \n\t\t\t\t
                          \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                          \n\t\t\t\t
                          \n\t\t\t\t\t\t\t
                          1. Select “Overview” (1) \u2192 “Install” (2) \u2192 In the “User authentication settings<\/strong>” section, select “Set up<\/strong>“<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                            \n\t\t\t\t
                            \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                            \n\t\t\t\t
                            \n\t\t\t\t\t\t\t
                              \n \t
                            1. In the “App permissions” section, select the appropriate permission for your application. About the “Type of app” section, choose “Web App, Automated App or Bot<\/b>“. In the “App info<\/b>” section, enter a valid temporary URL in the Callback URI \/ Redirect URL<\/b> field to complete the configuration. You will change this URL after configuring Firebase (1*). For the Website URL,<\/b> enter your website link.\nNote: you can\u2019t use localhost, so you need to deploy the web or use another valid URL. After filling in all the information, click Save<\/b>. Make sure to save the Client ID and Client Secret in the env file.<\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                              \n\t\t\t\t
                              \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                              \n\t\t\t\t
                              \n\t\t\t\t\t\t\t
                                \n \t
                              1. Click “Keys and Tokens” \u2192 “Regenerate” (API Key and Secret). Remember to save your API Key and API Key Secret to configure the Firebase (2*). <\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                \n\t\t\t\t
                                \n\t\t\t

                                Integrate Github for login<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                \n\t\t\t\t
                                \n\t\t\t\t\t\t\t
                                1. Go to https:\/\/github.com\/settings\/profile. In the Developer Settings<\/strong> tab \u2192 choose OAuth Apps<\/strong><\/li>
                                2. Select New OAuth App<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                  \n\t\t\t\t
                                  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                  \n\t\t\t\t
                                  \n\t\t\t\t\t\t\t
                                  1. Fill in all the information with the Authorization callback URL<\/i><\/b> (3)* temporarily set to http:localhost:3000<\/strong>, which will be replaced with the link from Firebase later.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                    \n\t\t\t\t
                                    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                    \n\t\t\t\t
                                    \n\t\t\t\t\t\t\t
                                    1. Save Client ID and Client secrets in env. file (4)*
                                      VITE_GITHUB_CLIENT_ID=Client ID

                                      VITE_GITHUB_CLIENT_SECRET=Client secrets<\/p><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

                                      \n\t\t\t\t
                                      \n\t\t\t

                                      Config Firebase to integrate social login<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                      \n\t\t\t\t
                                      \n\t\t\t\t\t\t\t
                                      1. Register at https:\/\/console.firebase.google.com\/u\/1\/<\/span> <\/a>by using your Google account. Then, select Get started with a Firebase project<\/strong> to get started.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                        \n\t\t\t\t
                                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                        \n\t\t\t\t
                                        \n\t\t\t\t\t\t\t
                                          \n \t
                                        1. Fill in the necessary details, then click Continue twice and choose Create project. You need to wait a moment for the system to configure your project.<\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                          \n\t\t\t\t
                                          \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                          \n\t\t\t\t
                                          \n\t\t\t\t\t\t\t
                                          1. After creating a project, select Authentication,<\/strong> next choose Get started<\/strong>, and finally click Sign-in method.<\/strong> First of all, we should configure Twitter..<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                            \n\t\t\t\t
                                            \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                            \n\t\t\t\t
                                            \n\t\t\t\t\t\t\t
                                            1. Select Twitter<\/b>, and enter the API Key and API Secret obtained in (2*). Copy the handler link and paste it into Callback URI \/ Redirect URL (1)*. Then click Save <\/b><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                              \n\t\t\t\t
                                              \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                              \n\t\t\t\t
                                              \n\t\t\t\t\t\t\t
                                              1. Choose Add new provider \u2192 Github. Enter the Client ID v\u00e0 Client secret created in (3).* Then we copy the URL handler and fill in the Authorization callback URL (3).* Click Save<\/b>.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                \n\t\t\t\t
                                                \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                \n\t\t\t\t
                                                \n\t\t\t\t\t\t\t
                                                  \n \t
                                                1. To get the Firebase configuration information for your web, we click Project settings<\/strong> in the Project Overview tab. Choose icon <\/><\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                  \n\t\t\t\t
                                                  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                  \n\t\t\t\t
                                                  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                  \n\t\t\t\t
                                                  \n\t\t\t\t\t\t\t
                                                    \n \t
                                                  1. Fill in all the information in the form then select Register App <\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                    \n\t\t\t\t
                                                    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                    \n\t\t\t\t
                                                    \n\t\t\t\t\t\t\t
                                                    1. Enter the information from the firebaseConfig section into the corresponding fields in the env file.
                                                      VITE_FIREBASE_PROJECT_ID=projectId
                                                      VITE_FIREBASE_API_KEY=apiKey
                                                      VITE_FIREBASE_MESSAGE_SENDER_ID=messagingSenderId
                                                      VITE_FIREBASE_AUTH_DOMAIN=authDomain
                                                      VITE_FIREBASE_STORAGE_BUCKET=storageBucket
                                                      VITE_FIREBASE_APP_ID=appId
                                                      VITE_FIREBASE_MEASUREMENT_ID=measurementId<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                      \n\t\t\t\t
                                                      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                      \n\t\t\t\t
                                                      \n\t\t\t

                                                      Screen flow of social login<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                      \n\t\t\t\t
                                                      \n\t\t\t

                                                      Login with Google<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                      \n\t\t\t\t
                                                      \n\t\t\t\t\t\t\t
                                                      1. Select Log in with Google<\/strong><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                        \n\t\t\t\t
                                                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                        \n\t\t\t\t
                                                        \n\t\t\t\t\t\t\t
                                                          \n \t
                                                        1. Choose your account, or register another account <\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                          \n\t\t\t\t
                                                          \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                          \n\t\t\t\t
                                                          \n\t\t\t\t\t\t\t
                                                            \n \t
                                                          1. You will receive a notification of successful registration.<\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                            \n\t\t\t\t
                                                            \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                            \n\t\t\t\t
                                                            \n\t\t\t

                                                            Login with Twitter<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                            \n\t\t\t\t
                                                            \n\t\t\t\t\t\t\t
                                                              \n \t
                                                            1. Select Log in with Twitter<\/strong><\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                              \n\t\t\t\t
                                                              \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                              \n\t\t\t\t
                                                              \n\t\t\t\t\t\t\t
                                                              1. Choose Authorize App<\/strong><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                \n\t\t\t\t
                                                                \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                \n\t\t\t\t
                                                                \n\t\t\t\t\t\t\t
                                                                  \n \t
                                                                1. You will receive a notification of successful registration.<\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                  \n\t\t\t\t
                                                                  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                  \n\t\t\t\t
                                                                  \n\t\t\t

                                                                  Login with Github<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                  \n\t\t\t\t
                                                                  \n\t\t\t\t\t\t\t
                                                                    \n \t
                                                                  1. Select Log in with Github<\/strong><\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                    \n\t\t\t\t
                                                                    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                    \n\t\t\t\t
                                                                    \n\t\t\t\t\t\t\t
                                                                    1. Click Authorize<\/strong> button<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                      \n\t\t\t\t
                                                                      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                      \n\t\t\t\t
                                                                      \n\t\t\t\t\t\t\t
                                                                        \n \t
                                                                      1. You will receive a notification of successful registration.<\/li>\n<\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                        \n\t\t\t\t
                                                                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                        \n\t\t\t\t
                                                                        \n\t\t\t

                                                                        Screen flow <\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                        \n\t\t\t\t
                                                                        \n\t\t\t\t\t\t\t

                                                                        The chart illustrates a social login workflow for a web application. Here\u2019s a step-by-step explanation:
                                                                        1. Login \u2013 The user begins to sign up for an account on a random social media platform.<\/p>

                                                                        \u25cf If the login attempt fails:<\/strong>
                                                                        The user is directed back to the localhost:3000\/login page to try logging in again.
                                                                        \u25cf If the login attempt is successful:<\/strong>
                                                                        The system redirects to localhost:3000 and goes to Decision: Check login.<\/p>

                                                                        2. Decision: Check Login Status – The system checks whether the user is already logged in.<\/p>

                                                                        \u25cf If the user is logged in:<\/strong>
                                                                        It proceeds to display a logged-in screen tailored to the specific social media platform the user is accessing.
                                                                        This leads to a success<\/strong> endpoint.
                                                                        \u25cf If the user is not logged in:<\/strong>
                                                                        The system navigates to the login page at localhost:3000\/login.<\/p>

                                                                        We made a diagram as shown below to describe how social login works<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

                                                                        \n\t\t\t\t
                                                                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                                                                        \n\t\t\t\t
                                                                        \n\t\t\t\t\t\t\t

                                                                        Finally, after reading this article, I hope you can implement social login integration by yourself. They are very easy steps to follow. If want to develop a web or applicaton that relating to social login you can learn more about our Custom Web\/App Implementation Service<\/span><\/a> and contact us<\/span><\/a> to get the quotation.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

                                                                        As we know, social login serves as a common feature in modern apps and websites. Check out our article to […]<\/p>\n","protected":false},"author":1,"featured_media":3210,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[47],"tags":[],"class_list":["post-1866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","no-social-count","single-post-item mb40"],"acf":[],"yoast_head":"\nSocial Login Integration with Google, Twitter and Github Account<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sparkminds.net\/vi\/social-login-integration-with-google-twitter-and-github-account\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Social Login Integration with Google, Twitter and Github Account\" \/>\n<meta property=\"og:description\" content=\"As we know, social login serves as a common feature in modern apps and websites. Check out our article to […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sparkminds.net\/vi\/social-login-integration-with-google-twitter-and-github-account\/\" \/>\n<meta property=\"og:site_name\" content=\"SparkMinds\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sparkminds.jsc\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-27T09:20:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-06T02:28:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8\"},\"headline\":\"Social Login Integration with Google, Twitter and Github Account\",\"datePublished\":\"2024-11-27T09:20:53+00:00\",\"dateModified\":\"2025-02-06T02:28:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/\"},\"wordCount\":1313,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sparkminds.net\/#organization\"},\"image\":{\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp\",\"articleSection\":[\"General\"],\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/\",\"url\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/\",\"name\":\"Social Login Integration with Google, Twitter and Github Account\",\"isPartOf\":{\"@id\":\"https:\/\/sparkminds.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp\",\"datePublished\":\"2024-11-27T09:20:53+00:00\",\"dateModified\":\"2025-02-06T02:28:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage\",\"url\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp\",\"contentUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sparkminds.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Social Login Integration with Google, Twitter and Github Account\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sparkminds.net\/#website\",\"url\":\"https:\/\/sparkminds.net\/\",\"name\":\"SparkMinds\",\"description\":\"A Reliable Software Development Partner\",\"publisher\":{\"@id\":\"https:\/\/sparkminds.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sparkminds.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sparkminds.net\/#organization\",\"name\":\"SparkMinds J.S.C\",\"alternateName\":\"SparkMinds\",\"url\":\"https:\/\/sparkminds.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png\",\"contentUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png\",\"width\":181,\"height\":66,\"caption\":\"SparkMinds J.S.C\"},\"image\":{\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sparkminds.jsc\",\"https:\/\/www.linkedin.com\/company\/sparkminds-j-s-c\/about\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/sparkminds.net\"],\"url\":\"https:\/\/sparkminds.net\/vi\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Social Login Integration with Google, Twitter and Github Account","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sparkminds.net\/vi\/social-login-integration-with-google-twitter-and-github-account\/","og_locale":"vi_VN","og_type":"article","og_title":"Social Login Integration with Google, Twitter and Github Account","og_description":"As we know, social login serves as a common feature in modern apps and websites. Check out our article to […]","og_url":"https:\/\/sparkminds.net\/vi\/social-login-integration-with-google-twitter-and-github-account\/","og_site_name":"SparkMinds","article_publisher":"https:\/\/www.facebook.com\/sparkminds.jsc","article_published_time":"2024-11-27T09:20:53+00:00","article_modified_time":"2025-02-06T02:28:22+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"admin","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"13 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#article","isPartOf":{"@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/"},"author":{"name":"admin","@id":"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8"},"headline":"Social Login Integration with Google, Twitter and Github Account","datePublished":"2024-11-27T09:20:53+00:00","dateModified":"2025-02-06T02:28:22+00:00","mainEntityOfPage":{"@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/"},"wordCount":1313,"commentCount":0,"publisher":{"@id":"https:\/\/sparkminds.net\/#organization"},"image":{"@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage"},"thumbnailUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp","articleSection":["General"],"inLanguage":"vi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/","url":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/","name":"Social Login Integration with Google, Twitter and Github Account","isPartOf":{"@id":"https:\/\/sparkminds.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage"},"image":{"@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage"},"thumbnailUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp","datePublished":"2024-11-27T09:20:53+00:00","dateModified":"2025-02-06T02:28:22+00:00","breadcrumb":{"@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#primaryimage","url":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp","contentUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/Social-Login-Integration.webp","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/sparkminds.net\/social-login-integration-with-google-twitter-and-github-account\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sparkminds.net\/"},{"@type":"ListItem","position":2,"name":"Social Login Integration with Google, Twitter and Github Account"}]},{"@type":"WebSite","@id":"https:\/\/sparkminds.net\/#website","url":"https:\/\/sparkminds.net\/","name":"SparkMinds","description":"A Reliable Software Development Partner","publisher":{"@id":"https:\/\/sparkminds.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sparkminds.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/sparkminds.net\/#organization","name":"SparkMinds J.S.C","alternateName":"SparkMinds","url":"https:\/\/sparkminds.net\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/","url":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png","contentUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png","width":181,"height":66,"caption":"SparkMinds J.S.C"},"image":{"@id":"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sparkminds.jsc","https:\/\/www.linkedin.com\/company\/sparkminds-j-s-c\/about\/"]},{"@type":"Person","@id":"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8","name":"admin","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/sparkminds.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/sparkminds.net"],"url":"https:\/\/sparkminds.net\/vi\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts\/1866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/comments?post=1866"}],"version-history":[{"count":8,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts\/1866\/revisions"}],"predecessor-version":[{"id":3229,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts\/1866\/revisions\/3229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/media\/3210"}],"wp:attachment":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/media?parent=1866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/categories?post=1866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/tags?post=1866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}