Help connecting React frontend to Go backend behind OpenZiti network

Hey everyone :waving_hand:

I’m trying to integrate OpenZiti into my app setup and could use some guidance.

Current setup:

  • Backend: Golang

  • Frontend: ReactJS

  • Ziti network is already running in Docker

  • Created identities, services, and policies

  • Followed the simple-server example from the Golang SDK

The Go server seems to work fine with Ziti, but I’m not sure how to make my React app connect to it.

Questions:

  1. How can a React (browser-based) frontend communicate with a backend that’s only reachable through OpenZiti?

  2. Do I need a Ziti tunnel or a specific SDK on the client side for the frontend?

  3. Is there an example setup for web apps connecting securely through Ziti?

Any pointers, docs, or working examples would be super helpful :folded_hands:

Hi @mann1996, welcome to the community and to OpenZiti! It looks like you also made a reddit post so thanks for replicating it here. Discourse is MUCH better at helping people than reddit is and this is our official support forum.

Awesome! We like to hear that!

React app - mmmm. This is going to be tricky. There's some work that @curt has been doing recently but it's all Angular-based at the moment. I'm unsure how clear it'll translate. (it's on my personal wishlist of items of our tech to play with, I just haven't gotten to play with it yet).

On the whole, the challenge you'll face is that modern browsers aren't really designed for zero trust connections, that's the work that @curt has been doing and what he did during the project we called browZer - which is no longer in development fwiw but i think a lot of the techniques @curt developed along the way are starting to make their way into a "browser sdk".

Generally, it's much easier to use a tunneler at first just because it's what people are more familiar with. But bringing the zero trust directly into the web app was exactly what browZer did and is the logical next step. There aren't any examples of doing this just yet though that I know of. I think it'll be helpful if Curt would comment here. He knows that this is something I'm really exctied to try myself but like I said, I've just not gotten to doing it just yet.

I'll point Curt here and see what other words of wisdom he might have to share with us. You migth be just a tiny bit too early for React but who knows, maybe you're the kinda person that is willing to roll some sleeves up? :slight_smile: We'll see. Also, I'd love it personally to see a blog post on whatever you come up with if that's in the works that'd be exciting ! :slight_smile:

I'll post on the reddit thread too just to tie these together

Hi @mann1996 The "recent work" @TheLumberjack referred to is what we call the ziti-sdk-browser.

The internals of this SDK are derived from the work I did in the larger browZer effort Clint mentioned. I plan to write some blog(s) about it soon... but in the meanwhile...read on here:

It was mentioned that this new SDK "is all Angular-based at the moment". To clarify, although we use the ziti-sdk-browser internally ourselves in a very large Angular web app, the ziti-sdk-browser is agnostic to the UI framework, and should be usable with React-based apps.

Some nuance is involved with what packaging tech is used to build the web app, so please keep us informed if you run into issues.

The examples subdirectory contains a rollup and a webpack sample (each show how to initialize the SDK, and do fetch operations to a protected Ziti Service). If you use one of these packaging stacks, you should be fine.

This SDK is quite new, and we haven't gone out of our way to publicize (or document) it yet, so if you dive in and hit any snags, or have any questions (or enhancement requests :slight_smile: then just let us know.

1 Like

Hi,
Apology for the delay. I was busy with other projects. For now I am using Tunneler on client side. But I did take a look at ziti-sdk-browser. From examples, I was there is an access token required to initialize the client. Is it just enrollment jwt? If yes, wouldn’t it be unsecure if token is exposed in browser.