Skip to main content

One post tagged with "auth"

View All Tags

ยท 5 min read

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

Prerequisites

To deploy yourself, you need to have:

  1. DigitalOcean account, or signup.
  2. Crossid tenant, or signup for free.

Components

The sample repo introduces two components:

  1. api-go - Protected micro service HTTP endpoint, written in Golang.
  2. frontend-react - SPA that performs performs authentication and consumes the /api-go endpoint, written in React.js.

components diagram

flowchart LR subgraph App-Platform direction LR subgraph frontend-react direction LR end subgraph api-go direction LR token-middleware -- valid token --> endpoint end end subgraph Crossid direction LR end frontend-react --redirect browser to login--> Crossid Browser --GET /react--> frontend-react Browser --GET /api-go--> api-go

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.

note

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.

  1. Client sends a request, providing a valid access token.
  2. The token middleware verifies token validity or denies the request.
  3. 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.

interaction diagram

sequenceDiagram; autonumber Browser->>+frontend-react: GET: /react/posts Browser->>+Crossid: User not authenticated Crossid->>Crossid: User Signin Crossid->>Browser: Access Token Browser->>api-go: GET /api-go
  1. An anonymous visitor tries to access /react/posts, a protected react route.
  2. Browser is redirected to Crossid for login.
  3. User logs in using its credentials (OTP, TOTP, Fingerprint, etc...)
  4. Browser is redirected back to /react/posts route with a valid access-token.
  5. The react app consumes the /api-go services by providing a valid access-token.

Let crossid know about React

Before deployment, we need to let Crossid know about your React app.

note

Our application URL will only be known after deployment, put https://localhost as a placeholder, we'll replace them later.

  1. In Admin console, navigate to Integration โ†’ Marketplace.
  2. Choose Single Page Application (SPA).
  3. Click on Add Integration.
  4. Follow wizard steps.

how-to

Then grant your identity access to the react app:

  1. From the admin console, navigate to Applications -> Applications.
  2. Select your app.
  3. Click on the Users tab.
  4. Click the Add User Assignment button.
  5. Choose the created identity (e.g., Jared Dunn).
  6. Click Save.

how-to

Save the Client ID to the next deployment steps.

Deploy on DigitalOcean

We have two components to deploy:

  • /api-go as a service, exposed under /api-go.
  • /frontend-react as static site , exposed under /react.

doctl

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.

  1. Fork crossid/sample-monorepo so you can modify it.
  2. Edit .do/app.yaml envs and commit it afterwards.
env varnoteexample
REACT_APP_CID_TENANT_IDyour crossid tenant idacme
REACT_APP_CID_CLIENT_IDclient_id from previous stepX2QnH2u4x5b2nMHnzqqeN...
ISSUER_BASE_URLoauth2 auth server base urlhttps://acme.crossid.io/oauth2

Deploy by:

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
# https://sample-monorepo-l38pj.ondigitalocean.app

Update Crossid app

Lets update our app in crossid with the URL assigned to our app:

  1. In admin, go to Applications -> Applications and select our React application.
  2. Update the fields as explained below:
fieldexamplenote
Login Redirect URIshttps://sample-monorepo-l38pj.ondigitalocean.app/react/The whitelisted URI to redirect browser once login completes.
Logout Redirect URIshttps://sample-monorepo-l38pj.ondigitalocean.app/react/The whitelisted URI to redirect browser once logout completes.
Allowed Cors Originshttps://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!

Recap

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.

deployed

References