With DigitalOcean app platform, it is possible to deploy multiple components (such as frontend and backend) from a single code repository.
A monorepo makes it easier to maintain sets of related components that work together. It typically has a single build pipeline, code standardization can be enforced on all components together and it greatly improves collaboration by code sharing as team scales.
This blog explains how to deploy a monorepo with identity-awareness on DigitalOcean app platform.
Freeing you from implementing authentication yourself, so you can focus on things that make you unique.
Final source code available here: https://github.com/crossid/sample-monorepo
To deploy yourself, you need to have:
The sample repo introduces two components:
- api-go - Protected micro service HTTP endpoint, written in Golang.
- frontend-react - SPA that performs performs authentication and consumes the
/api-goendpoint, written in React.js.
api-go - an HTTP micro service.
The component /api-go demonstrates how to expose a protected HTTP endpoint, in Golang.
It response some data only if the request was sent with a valid access token.
Micro services should be kept simple and not handle any user authentication. it's up to a frontend (see below) to authenticate visitors and pass a valid access-token to the service.
- Client sends a request, providing a valid access token.
- The token middleware verifies token validity or denies the request.
- If token is valid, the endpoint is invoked, returning some data.
frontend-react - SPA frontend
The component /frontend-react demonstrates how to build a static SPA app, written in React.js.
The frontend-react component let user:
- Let visitors see the home page, anonymously.
- A protected route (/posts) that can only be seen by authenticated users. this route also consumes our api-go service.
- Sign users in via Crossid.
- Sign users out via Crossid.
- An anonymous visitor tries to access
/react/posts, a protected react route.
- Browser is redirected to Crossid for login.
- User logs in using its credentials (OTP, TOTP, Fingerprint, etc...)
- Browser is redirected back to
/react/postsroute with a valid access-token.
- The react app consumes the
/api-goservices by providing a valid access-token.
Let crossid know about React
Before deployment, we need to let Crossid know about your React app.
Our application URL will only be known after deployment, put https://localhost as a placeholder, we'll replace them later.
- In Admin console, navigate to Integration → Marketplace.
- Choose Single Page Application (SPA).
- Click on Add Integration.
- Follow wizard steps.
curl -X POST \
-H "Authorization: Bearer <API_TOKEN>" \
"scope":"openid offline profile email",
Then grant your identity access to the react app:
- From the admin console, navigate to Applications -> Applications.
- Select your app.
- Click on the Users tab.
- Click the Add User Assignment button.
- Choose the created identity (e.g., Jared Dunn).
- Click Save.
Save the Client ID to the next deployment steps.
Deploy on DigitalOcean
We have two components to deploy:
doctl allows you to interact with the DigitalOcean API via CLI. for the purpose of this blog, we use it to deploy our components in app platform.
The app platform requires a single app.yaml file that defines the components to be deployed in app platform.
- Fork crossid/sample-monorepo so you can modify it.
.do/app.yamlenvs and commit it afterwards.
|REACT_APP_CID_TENANT_ID||your crossid tenant id||acme|
|REACT_APP_CID_CLIENT_ID||client_id from previous step||X2QnH2u4x5b2nMHnzqqeN...|
|ISSUER_BASE_URL||oauth2 auth server base url||https://acme.crossid.io/oauth2|
doctl apps create --spec .do/app.yaml
To track the deployment progress:
doctl a lsd $(doctl a list --format ID --no-header)
Once app is deployed, get its external URL by:
doctl apps list --format DefaultIngress --no-header
# output example
Update Crossid app
Lets update our app in crossid with the URL assigned to our app:
- In admin, go to Applications -> Applications and select our React application.
- Update the fields as explained below:
|Login Redirect URIs||https://sample-monorepo-l38pj.ondigitalocean.app/react/||The whitelisted URI to redirect browser once login completes.|
|Logout Redirect URIs||https://sample-monorepo-l38pj.ondigitalocean.app/react/||The whitelisted URI to redirect browser once logout completes.|
|Allowed Cors Origins||https://sample-monorepo-l38pj.ondigitalocean.app*||The whitelisted URI to allow CORS.|
Now hit https://sample-monorepo-l38pj.ondigitalocean.app/react and see it in action!
DigitalOcean app platform is a PAAS that let you focus on code rather infra, Crossid is a SAAS IAM that frees you from handling identity, when combining those together, you focus on things that make you unique.