Can I use an OAuth 2.0 service (like the Jira API) with only a frontend app?

Issue

This seems like it should be a simple question, but for some reason I cannot find a clear answer or wrap my head around the larger concepts.

I am looking to make API calls into our Jira Cloud Instance using OAuth2 (following the Jira documentation here: https://developer.atlassian.com/cloud/jira/platform/oauth-2-3lo-apps/) and I am not clear whether I can do this with a frontend app only (in my case Angular) or if I need my own backend app on a server in order to do this.

The two images on the Atlassian documentation page make it seem clear that I don't need something like a Node server in order to implement this, but when I Google looking for tutorials or examples, I don't find any.

Are there any examples or repos that I could look at that that anyone knows about here?

All help is much appreciated!

Solution

You can implement an OAuth 2.0 based login for some providers using plain JavaScript. The JS code needs to send messages similar to those in my blog post.

CLIENT AUTHENTICATION

Yet Atlassian requires a client secret and there is nowhere safe in the browser to store it, so you need to supply it using a backend component.

Your app can connect with Atlassian via a reverse proxy, a utility API, or via your own authorization server (AS). In the latter case, the AS could provide the Atlassian client secret, and the connection from the frontend to the AS could use PKCE.

BROWSER BEST PRACTICES

These days, it is recommended for browser based apps to use a backend for frontend, such as a utility API, as part of their OAuth flows. This keeps tokens out of the browser, and reduces the impact of cross site scripting exploits. The BFF also supplies an OAuth client credential when getting tokens from the AS.

IN YOUR CASE

I would start by developing a small backend component to assist your frontend. This does not need to change the architecture of your Angular app.

Answered By - Gary Archer