Bike Tracker

Private version of Strava: Track rides, compete with friends. Sign in with Google.

• Google

• Deployment with Heroku

• Local database (Docker Compose)

• Heroku database

Login with Google

This section shows how to configure the Bike Tracker using Google as the Authentication Provider and covers the following topics:

• Initial setup

• Setting the redirect URI

• Configure application.yml

• Boot up the application

• User registration

Initial setup

To use Google’s OAuth 2.0 authentication system for login, you must set up a project in the Google API Console to obtain OAuth 2.0 credentials.

Note	Google’s OAuth 2.0 implementation for authentication conforms to the OpenID Connect 1.0 specification and is OpenID Certified.

Follow the instructions on the OpenID Connect page, starting in the section, "Setting up OAuth 2.0".

After completing the "Obtain OAuth 2.0 credentials" instructions, you should have a new OAuth Client with credentials consisting of a Client ID and a Client Secret.

Setting the redirect URI

The redirect URI is the path in the application that the end-user’s user-agent is redirected back to after they have authenticated with Google and have granted access to the OAuth Client (created in the previous step) on the Consent page.

In the "Set a redirect URI" sub-section, ensure that the Authorized redirect URIs field is set to http://127.0.0.1:8080/login/oauth2/code/google.

Tip	The default redirect URI template is {baseUrl}/login/oauth2/code/{registrationId}. The registrationId is a unique identifier for the ClientRegistration.

Important

If the application is running behind a proxy server, it is recommended to check Proxy Server Configuration to ensure the application is correctly configured. Also, see the supported URI template variables for redirect-uri.

Configure application.yml

Now that you have a new OAuth Client with Google, you need to configure the application to use the OAuth Client for the authentication flow. To do so:

1. Go to application.yml and set the following configuration:

   spring:
     security:
       oauth2:
         client:
           registration:  # (1)
             google:  # (2)
               client-id: google-client-id
               client-secret: google-client-secret

   Example 1. OAuth Client properties

   1. spring.security.oauth2.client.registration is the base property prefix for OAuth Client properties.

   2. Following the base property prefix is the ID for the ClientRegistration, such as google.

2. Replace the values in the client-id and client-secret property with the OAuth 2.0 credentials you created earlier.

Boot up the application

Launch the Spring Boot 2.0 sample and go to http://127.0.0.1:8080. You are then redirected to the default auto-generated login page, which displays a link for Google.

Click on the Google link, and you are then redirected to Google for authentication.

After authenticating with your Google account credentials, the next page presented to you is the Consent screen. The Consent screen asks you to either allow or deny access to the OAuth Client you created earlier. Click Allow to authorize the OAuth Client to access your email address and basic profile information.

At this point, the OAuth Client retrieves your email address and basic profile information from the UserInfo Endpoint and establishes an authenticated session.

User Registration

User Registration is currently hard-coded based on a user existing in the t_user table.

Example manual registration:

insert into t_user (oauth_subject) values (the google user id you wish to register);

This can be done locally using:

docker run -it --network bike-tracker_default postgres:15 psql -h bike_tracker_postgres -U biketracker

Heroku Deployment with Github Integration

• [Heroku Github Integration](https://devcenter.heroku.com/articles/github-integration)

Local database (Docker Compose)

This project includes a docker-compose.yml to run a local PostgreSQL instance for development.

Start Postgres locally

docker compose up -d

• Connection details (match application.yml.sample):

• Host: localhost

• Port: 5432

• Database: biketracker

• Username: biketracker

• Password: biketracker

To use the local database settings, copy application.yml.sample to application.yml and adjust any other values (for example, Google OAuth client credentials).

Database