spring-react-google-oauth2
Google Oauth2 login scenario with Spring boot + React
Below diagram is based on oauth implicit flow.
Result
How to start
Prerequiste
You have to make a Google oauth credential first.
This reference will be helpful.
https://docs.retool.com/docs/google-oauth-credentialsSpring boot
- Edit the value of
app: googleClientId
to your google client id andapp: jwtSecret
to your secret which can be any string longer than 256 bits for security inapplication.yml
.
app:
jwtSecret: "String longer than 256 bits"
googleClientId: "your google client id"
- Type command in terminal
cd spring-oauth
./gradlew build
cd build/libs
java -jar oauth-0.0.1-SNAPSHOW.jar
The whole process is described below
-
Verify Id token received from the client.
-
Make an account using the information of the id token.
-
Save account to DB using Spring-Data-JPA and H2 database.
-
Make custom JWT.
-
Send cookie including custom JWT to the client.
-
Requesting to API should contain JWT in the request header.
-
JWT filter validates jwt in the request header for every request from the client.
REACT
- Edit the value of
REACT_APP-GOOGLE_GOOGLE_CLIENT_ID
inreact-oauth/.env
to your google client id.
REACT_APP_API_URL="http://localhost:8080"
REACT_APP_GOOGLE_CLIENT_ID="your google client-id"
- Type command in terminal
cd react-oauth
npm install
npm start
The whole process is described below
-
Login with your existing google account.
-
Get an ID token from google.
-
Send ID token to server for login.
-
Get a cookie that contains jwt made by the server.
-
Request user info to the server with a cookie.
-
Show user info.