How to use oauth with 1st party client-side js app?

Question

The model for our product is like this:

Api backend (headless)

I already have oauth set up and ready to use with a resource owner credentials grant. Anyone who wants to use our api can do so using either an API key or their username/password. Of course they also need their client ID and secret.

SPA frontend that accesses the Api

I have built an SPA that will uses the api to provide a portal GUI for our clients. Given that this client-side app is owned and administrated by us (so it's a trusted app) how can I safely authenticate users using only username/password with oauth?

Originally it was using a JWT auth system that only required username/pass but now that we've implemented oauth I'd like to consolidate. It's unreasonable to make every user need to also have their client id and secret on hand to login, but I want users to have full access to the api from the GUI.

I've looking at using CSRF tokens but how would that work with my app when nothing is generated server-side?

I'm not sure how to proceed.

EDIT: very similar to the problem here.

Matt Foxx Duncan · Accepted Answer · 2015-06-16T20:11:21.777

2

I have decided to use the solution described here.

And here is a snippet of my implementation

The TL;DR version is

Create a proxy between the app and the api
Store the client ID and secret in the proxy
App logs in using password grant type -- proxy intercepts login request and inserts client id and secret
On login response proxy returns access token as an encrypted cookie
Client stores cookie and sends with api requests (to proxy)
Proxy decrypts cookie and inserts access token into Authorization header before forwarding to api endpoint

For me this has several advantages over implementing something custom on the api itself:

No need for custom grant on oauth server
ID/secret is hidden from app securely and can still use password grant
oauth server can identify client (no need for separate client ids for each user)

edited Jun 16 '15 at 20:11

answered Apr 14 '15 at 16:02

Matt Foxx Duncan

2,074
3
23
38

Do you have some sample code of the proxy? I would be much appreciated. – Helder Lucas Jun 16 '15 at 12:02
It's a bit messy but [here's what I'm using now](https://gist.github.com/FoxxMD/207fc6f6545d07741537) – Matt Foxx Duncan Jun 16 '15 at 20:00
Thank you really appreciated :D – Helder Lucas Jun 18 '15 at 08:45
Is there any downside of using this? – Shalahuddin Al-Ayyubbi May 22 '21 at 15:06

score 1 · Answer 2 · edited Oct 07 '21 at 11:32

1

You should not use the resource owner credential grant from a JavaScript application. The fact that you own and administer the application does not make it a trusted application.

A trusted client is an application that can keep a secret. SPAs or any JavaScript app cannot keep a secret.

You should use the implicit grant for non-trusted clients.

edited Oct 07 '21 at 11:32

Community

1
1

answered Apr 13 '15 at 16:36

MvdD

22,082
8
65
93

An implicit grant does not give enough authority to the user though. The api, along with the gui, is for administration and almost entirely non-public. – Matt Foxx Duncan Apr 13 '15 at 16:43
Not sure what you mean with 'does not give enough authority to the user'. You'll need to implement RBAC at the API level. – MvdD Apr 13 '15 at 17:27

How to use oauth with 1st party client-side js app?

2 Answers2