The third part of our series, though not centered on coding per se, holds considerable importance.

In general, any application that uses OAuth 2.0 to access social login provider APIs, must have authorization credentials that identify the application to the provider’s OAuth 2.0 server.

Many developers, myself included, have encountered the frustration of acquiring or setting up these credentials. In this segment, I’ll walk you through the process on the example of Google, GitHub and Twitter, so that we can use them in our application later.

I recommend revisiting the first and second parts of this series for a more comprehensive grasp of our current task.

Google Authorization Credentials

Navigate to Google API Console and create a new project. Carefully choose the google account with which you will be associating your project.

Follow the instructions on the screen and choose a memorable name:

You will be notified about the successful creation in the notifications pane and you can navigate to the newly created project from there:

Once navigated, you will see that the new project has been preselected in the projects list and you can monitor all the different metrics right from the dashboard:

Navigate to the credentials menu:

Create new OAuth client ID credentials:

You will be prompted to configure the consent screen first, before proceeding to the next steps:

Select External as the user type and remember, from the the information that’s provided, that unless you add a user to the list of test users, they won’t be able to authenticate (because the app is in testing mode and we are not planning to push it to production):

Fill in the information about your app. Choose the name carefully as it will be presented to the users:

Save and continue to choosing the scopes for your app. Select only user info and user profile scopes as we won’t be needing more for our application:

Save and continue to next section — test users. Here add any email that you will be using for authenticating with our application. Then save and continue:

Last, you will be displayed a summary of the configuration and you can get back to the credentials menu. Now that we have configured the consent screen, you will directly be displayed the client ID creation form:

Choose web application in the application type:

Provide the app details, including authorized JavaScript origins (the address where our Angular application will be hosted) and authorized redirect URIs (the URI where users will be redirected post-authentication, typically to our backend app for user authentication and information handling):

After creating the credentials, you’ll encounter a pop-up displaying the necessary information: the client ID and client secret. Feel free to copy this information or retrieve it later as needed; it’ll be accessible at any time:

Next, add the following to your application.properties. Don’t forget to replace CLIENT_ID and CLIENT_SECRET with the credentials that you generated above.

# Google OAuth2 Configuration
spring.security.oauth2.client.registration.google.clientId=CLIENT_ID
spring.security.oauth2.client.registration.google.clientSecret=CLIENT_SECRET
spring.security.oauth2.client.registration.google.redirectUri={baseUrl}/oauth2/callback/{registrationId}
spring.security.oauth2.client.registration.google.scope=email, profile

This should suffice to progress with our application. However, if you require further details or wish to delve deeper, you can explore Google’s documentation here.

GitHub Authorization Credentials

Next, we’ll transition to GitHub. You can create and register an OAuth app under your personal account or within any organization where you have administrative access.

Navigate to your GitHub account settings and then all the way down to the developer settings:

Select OAuth apps and choose New OAuth App:

Fill in the information and click Register application:

Once created, you’ll be directed to a summary page where the client ID will already be displayed. However, the client secret will not be shown yet. For generating the secret, you should click Generate a new client secret. You will be prompted to verify your access and authenticate.

Be sure to copy the client secret once it’s displayed, as you won’t have access to it once you leave the page.

Replace the CLIENT_ID and CLIENT_SECRET properties with the credentials generated for GitHub in your application.properties file. Additionally, note that scopes need to be configured in different formats for different providers (missing that is one of the most common sources for errors).

# GitHub OAuth2 Configuration
spring.security.oauth2.client.registration.github.clientId=CLIENT_ID
spring.security.oauth2.client.registration.github.clientSecret=CLIENT_SECRET
spring.security.oauth2.client.registration.github.redirectUri={baseUrl}/oauth2/callback/{registrationId}
spring.security.oauth2.client.registration.github.scope=user:email, read:user

Once more, if you require additional information, referring to the official documentation would be a good idea.

Twitter Authorization Credentials

For Twitter integration, you’ll need to navigate to the developer portal, then open the Projects & Apps menu. Select the default project or create a new one if projects aren’t visible yet:

Follow the provided instructions and complete the required information in a similar manner to this:

At the final step, your credentials will be generated. Ensure to copy them attentively this time as Twitter, like GitHub, won’t display the same credentials again. You’d need to regenerate them if they’re lost:

Now the app we created will be visible in the projects list in side bar. Select it and then click Set up next to the user authentication settings:

Configure the settings like the following:

Once saved, get back to your app’s dashboard, go to keys and tokens and copy the client ID and client secret:

Add the following to the application.properties, don’t forget to replace the placeholders with the actual values you copied above:

# Twitter OAuth2 Configuration
spring.security.oauth2.client.registration.twitter.client-id=CLIENT_ID
spring.security.oauth2.client.registration.twitter.client-secret=CLIENT_SECRET
spring.security.oauth2.client.registration.twitter.redirect-uri={baseUrl}/oauth2/callback/{registrationId}
spring.security.oauth2.client.registration.twitter.scope=read:users

You can visit the official docs for any additional information or follow-up questions.

Facebook & LinkedIn Authorization Credentials

For Facebook, acquiring credentials requires business verification. Similarly, LinkedIn authorization cannot be done under a member’s profile. You may need to inquire about this with your clients. If you’re aware of any alternative solutions, feel free to share them in the comments section.

That wraps up this tutorial. I hope it provided valuable insights. Next, we’ll proceed to set up a minimal frontend application and test our configurations in action.

As usual, the tutorial code can be found on my GitHub repository under the branch tutorial/part-3 if you wish to explore it in isolation. Alternatively, you can track the application’s progress on the main branch.