react-auth0-spa

This sample contains some codes and configurations of

• Login by OpenID connect with Auth0
• grpc-web with redux-saga
• gRPC service on istio on GKE

This sample mainly depends on these tools below.

• Frontend

  • TypeScript
  • auth0-spa-js
  • react, redux, redux-saga
  • grpc-web

• Backend

  • Go
  • grpc-go

Usage

Please try this example on Linux.

configure Auth0

• sign up Auth0
• configure auth0 referring to React: Login and write following items down
  • domain
  • client id
• set "redirect uri" in auth0 setting to http://localhost:3000/callback

execute Frontend

• checkout this repository
• execute this command

npm install

• edit .env file like this

REACT_APP_DOMAIN=YOUR_AUTH0_DOMAIN_WROTE_DOWN_IN_THE_PREVIOUS_SECTION
REACT_APP_CLIENT_ID=YOUR_AUTH0_CLIENT_ID_WROTE_DOWN_IN_THE_PREVIOUS_SECTION
REACT_APP_REDIRECT_URI=http://localhost:3000/callback
REACT_APP_ECHOSERVICE_URL=http://localhost:8080
EXTEND_ESLINT=true

• execute this command

npm run start

execute Backend

• change directory

cd backend

• run envoy

docker run --rm -d --net=host -v ${PWD}/envoy/:/etc/envoy/  envoyproxy/envoy:v1.12.3 

• run API server

docker build -t mmitou/echo-service .
docker run --rm -it --env-file env -p 9090:9090 mmitou/echo-service

execute Backend on GKE

cd backend
gcloud builds submit -t gcr.io/[YOUR_GCP_PROJECT_ID]/echo-service .
cd envoy
gcloud builds submit -t gcr.io/[YOUR_GCP_PROJECT_ID]/envoy-grpc .
gcloud container clusters create sample
gcloud container clusters get-credentials sample
kubectl apply -f sample-sidecar.yaml
kubectl get services -w

after a while, if sample-lb gets external ip, set the ip to frontend env file and execute "npm run start".

execute Backend on istio on GKE

cd backend
gcloud builds submit -t gcr.io/[YOUR_GCP_PROJECT_ID]/echo-service .
cd istio
gcloud beta container clusters create sample --addons=Istio
gcloud container clusters get-credentials sample
kubectl apply -f sample.yaml
kubectl apply -f istio.yaml