Understanding Long Term Authorization

[Blyxie]

Plan

Free/Premium

Country

Device

(iPhone 8, Samsung Galaxy 9, Macbook Pro late 2016)

Operating System

(iOS 10, Android Oreo, Windows 10,etc.)

My Question or Issue

Hi, I'm developing a front end React Application where the only things I want from the API are just a few specific playlists and some recommendations. I don't need/want users to sign in, and ideally only I need to sign in once and then it'll remain authorized. I can't use a back end server, which seems required for refresh tokens. Is that correct? What would be the best way to go about this

[LambertSpot]

If you do not have a backend, then you need to get a token via authorization (user login). If you maintain a backend, then you can use client credentials (no user login required). 

What kind of application are you developing? Maybe you have a need of a backend for some other feature in the application?

[Blyxie]

It's more that I don't want to pay for a server to deploy the application, although I could use something like NextJS maybe and host that for free on Vercel? However, if the client secret was kept as an env variable, couldn't that hide it even in a front end?

[LambertSpot]

Yes, there are several alternatives (Vercel, GCP, AWS, Azure, etc.) that could provide you with a free backend if your usage is low enough (tip is to configure spending limits / alerts to prevent you from getting a surprise invoice). 

As for why you should not keep API secrets in the front end code, you can find several resources online about the topic. But basically anyone using your application could get a hold of it, and use it to make API requests using your quota, cost you money, or access data related to requests made using it. 

Alternatively you can have a user authorization flow, you can read more about it here. But then you need a user to login to query the API.

[smacklol]

Even if in your code you reference an environment variable, that only protects an API key from bad actors snooping through repositories on GitHub. Any build process for React or purely front-end Next.js will ultimately stick that API key into the JavaScript bundle shipped to the client, and it'll be exposed. Think about it: the only way users will be able to use your API key from a purely front-end app is if its in front end code

However, Next.js allows for a lot of server-side actions... and, for your use case, caching behavior. You could get away with simple API key usage with some specific Next.js caching config. And deploying Next.js to Vercel is pretty streamlined. The free tier for hosting is generous, but if you're looking to monetize your app, that's a different story