OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to design authentication between my React frontend and FastAPI backend, along with OAuth2.0 to an external service (Spotify)

  • Thread starter Thread starter tprebenda
  • Start date Start date
T

tprebenda

Guest
I am new to auth and fullstack web development in general- this is my first app! Here's the breakdown:

My users will arrive at my UI, click a "Login with Spotify" button which will redirect them to the Spotify OAuth server to authorize my app to use their data (Authorization code flow).

After authenticating, Spotify redirects back to my UI with an auth code in the URL params. I then grab this auth code and send it to my FastAPI backend, which exchanges the code for an access token and stores it locally (server-side auth). My backend returns "token retrieved" to my UI, and the UI then automatically makes a few requests to my backend for some user data to display in the UI.

This is the backend-for-frontend BFF auth pattern, and it works nicely. When a user requests Spotify data from the UI, the backend adds the access token to the request (basically a proxy) and the frontend never has to worry about token maintenance, for security reasons!

My question is this: how should I configure authentication between a user on my client/frontend and my backend API? I know FastAPI has extensive documentation for using JWT to pass back and forth between my frontend and backend, but I'm struggling to conceptualize how I should authenticate my users AFTER they have already auth'd against the Spotify API.

Can I just use something from the Spotify OAuth flow to also indicate user identity between my frontend and backend?

I also know I can configure CORS on my backend to only accept requests from my frontend URL... is that all I need to do?

(Another question: I know Spotipy uses an internal cache handler for identity management, can I use Spotipy to help me with this?)

Thanks for your help, I really appreciate it!

Edit: I guess I'm looking for a specific suggestion on what technology to use (i.e. maybe redis) for my use-case: simple authentication between my frontend and backend. This is for a personal project so I'm not trying to spend the money and time for a super complex infrastructure, the app will barely get used.

Example: "you should use something like redis on your FastAPI server to store the username or ID returned from the Spotify OAuth. This process involves ____ on FastAPI and _____ on your frontend. Here are some docs...."
<p>I am new to auth and fullstack web development in general- this is my first app! Here's the breakdown:</p>
<p>My users will arrive at my UI, click a "Login with Spotify" button which will redirect them to the Spotify OAuth server to authorize my app to use their data (<a href="https://developer.spotify.com/documentation/web-api/tutorials/code-flow" rel="nofollow noreferrer">Authorization code flow</a>).</p>
<p>After authenticating, Spotify redirects back to my UI with an auth code in the URL params. I then grab this auth code and send it to my FastAPI backend, which exchanges the code for an access token and stores it locally (server-side auth). My backend returns "token retrieved" to my UI, and the UI then automatically makes a few requests to my backend for some user data to display in the UI.</p>
<p>This is the backend-for-frontend BFF auth pattern, and it works nicely. When a user requests Spotify data from the UI, the backend adds the access token to the request (basically a proxy) and the frontend never has to worry about token maintenance, for security reasons!</p>
<p>My question is this: how should I configure authentication between a user on my client/frontend and my backend API? I know FastAPI has extensive documentation for using JWT to pass back and forth between my frontend and backend, but I'm struggling to conceptualize how I should authenticate my users AFTER they have already auth'd against the Spotify API.</p>
<p>Can I just use something from the Spotify OAuth flow to also indicate user identity between my frontend and backend?</p>
<p>I also know I can configure CORS on my backend to only accept requests from my frontend URL... is that all I need to do?</p>
<p>(Another question: I know Spotipy uses an internal cache handler for identity management, can I use Spotipy to help me with this?)</p>
<p>Thanks for your help, I really appreciate it!</p>
<p><strong>Edit</strong>: I guess I'm looking for a specific suggestion on what technology to use (i.e. maybe redis) for my use-case: simple authentication between my frontend and backend. This is for a personal project so I'm not trying to spend the money and time for a super complex infrastructure, the app will barely get used.</p>
<p>Example: "you should use something like redis on your FastAPI server to store the username or ID returned from the Spotify OAuth. This process involves ____ on FastAPI and _____ on your frontend. Here are some docs...."</p>
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top