Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/iethem/spring-jwt-firebase

Spring Boot JWT Example with Firebase Authentication
https://github.com/iethem/spring-jwt-firebase

Last synced: about 2 months ago
JSON representation

Spring Boot JWT Example with Firebase Authentication

Host: GitHub
URL: https://github.com/iethem/spring-jwt-firebase
Owner: iethem
License: mit
Created: 2020-04-26T12:32:48.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-12-10T08:57:25.000Z (about 2 years ago)
Last Synced: 2023-03-07T17:50:53.418Z (almost 2 years ago)
Language: JavaScript
Size: 2.32 MB
Stars: 21
Watchers: 2
Forks: 5
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

# Spring Boot JWT Example with Firebase Authentication
Spring Security OAuth2 implementation to make use of JSON Web Tokens
> [Do it yourself!](DIY.md)

- Firebase Authentication
- Cloud Firestore
- React
- Spring Boot
- Spring Security

## Project Structure
```
src
└── main
├── docker
├── java
├── javascript
└── resources
```

## Usage
1. Create a Firebase Application on Firebase ([more information](https://gitlab.eteration.com/blogs/www/blob/master/2019/October/Firebase.md#creating-a-firebase-application))
- Activate Sign-in Providers: Email/Password and Google.
- Create Database (Cloud Firestore)
2. Create a web app on your Firebase Project Settings
- Replace your config with `src/main/javascript/app/firebaseConfig.js`
```js
const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
};

export default firebaseConfig;
```
3. Create a service account for Java on your Firebase Project Settings
- Replace your config with `src/main/resources/firebase-service-credentials.json`
```json
{
"type": "",
"project_id": "",
"private_key_id": "",
"private_key": "",
"client_email": "",
"client_id": "",
"auth_uri": "",
"token_uri": "",
"auth_provider_x509_cert_url": "",
"client_x509_cert_url": ""
}
```
4. Replace your `project id` on `src/main/resources/application.yml`
```
spring:
security:
oauth2:
resourceserver:
jwt:
issuer-uri: https://securetoken.google.com/
jwk-set-uri: https://www.googleapis.com/robot/v1/metadata/jwk/[email protected]
```

## React
Open the project from CLI and run the following commands:

cd src/main/javascript
npm i
npm start

> Other npm scripts can be found on [react-boilerplate/commands](https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/commands.md#command-line-commands)

To use other sign-in providers like Facebook, Twitter:
- Add providers on Firebase
- Configure the Firebase UI config

```js
//../javascript/app/containers/HomePage/index.js

const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',
// We will display Email and Google as auth providers.
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => false,
},
};
```
> Learn more configuring sign-in providers on [firebaseui-web](https://github.com/firebase/firebaseui-web/#configuring-sign-in-providers).

## Spring Boot

Open the project from CLI and run the following commands:

./gradlew bootRun

## Building

**Note:** If you have added new routes on React application check `MvcConfig.java` under the `src/main/java` folder.

To install npm packages:
> If you installed packages you don't need to run this command

./gradlew npmInstall

To build react app:

./gradlew npmBuild

To copy build output to src/main/resources/web:

./gradlew copyNewBuild

To build Java app:

./gradlew build

To create docker image for the whole application:

./gradlew docker

Once the build has finished, you can start the application via the command-line. Go to `build/libs` folder and execute the jar file:

java -jar firebase-0.0.1-SNAPSHOT.jar

Point your browser to it and you should see the newly created React app running.

http://localhost:8080

To dockerize the application:

./gradlew docker

To run docker image:

docker run --rm -it -p 8080:8080 iethem/firebase

## Retrieving/Validating ID tokens
> Use the React application to get ID tokens, the Spring Boot application does not provide ID tokens.

When a user or device successfully signs in, Firebase creates a corresponding ID token that uniquely identifies them and grants them access to several resources, such as Firebase Realtime Database and Cloud Storage. We can re-use that ID token to identify the user or device on our custom backend server. To retrieve the ID token from the client (React), make sure the user is signed in and then get the ID token from the signed-in user:
```js
firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
console.log(idToken)
// Send token to your backend via HTTPS
// ...
}).catch(function(error) {
// Handle error
});

// Check src/main/javascript/app/utils/request.js
```

Once we have an ID token, we can send that JWT to our backend and validate it:
```command
curl http://localhost:8080/api/user
-H "Accept: application/json"
-H "Authorization: Bearer {idToken}"
```

## Reference
You can find a related post for this repository [here](https://gitlab.eteration.com/blogs/www/blob/master/2019/October/Firebase.md).

## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details