Production Build Query

[Geoff Topley]

Has anyone any interesting production live apps they would like to share?

I'm also interested in finding out how you handle the security of your app. I've built a pretty nice app locally using my strava data, but have no idea of how to secure it if I was to push it live to the world. Thinking of using Netlify or similar to host; but no idea of how to get around the initial token retrieval.

Locally I call out to https://www.strava.com/oauth/authorize?client_id=xxxxx&response_type=code&redirect_uri=http://localhost:3000/callback/exchange_token&approval_prompt=force&scope=activity:read to get the auth token etc. No idea how to handle all this for a production build - since my client_id for one is part of the URL.

Any advice?

[Bryant Likes]

I host my app in Azure. It is a mix of client side and server side applications.  https://komchallenges.com/

As for that URL with the client id, there is no way around that. The client id isn't really a secret and is just an incremental number. You just need to make sure you keep your client secret safe and don't share that in client side code. 

--
You received this message because you are subscribed to the Google Groups "Strava API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to strava-api+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/strava-api/17b0f89d-4f20-41e1-a001-b504c6d459c7o%40googlegroups.com.

[Geoff]

Nice, thanks for the reply! Good to know about the client id. Lots to review on your app.. looks good, thanks for sharing!

On Friday, 10 July 2020 21:51:49 UTC+1, Bryant Likes wrote:

I host my app in Azure. It is a mix of client side and server side applications.  https://komchallenges.com/

As for that URL with the client id, there is no way around that. The client id isn't really a secret and is just an incremental number. You just need to make sure you keep your client secret safe and don't share that in client side code. 

On Fri, Jul 10, 2020 at 1:11 PM Geoff Topley <geoff...@gmail.com> wrote:

Has anyone any interesting production live apps they would like to share?

I'm also interested in finding out how you handle the security of your app. I've built a pretty nice app locally using my strava data, but have no idea of how to secure it if I was to push it live to the world. Thinking of using Netlify or similar to host; but no idea of how to get around the initial token retrieval.

Locally I call out to https://www.strava.com/oauth/authorize?client_id=xxxxx&response_type=code&redirect_uri=http://localhost:3000/callback/exchange_token&approval_prompt=force&scope=activity:read to get the auth token etc. No idea how to handle all this for a production build - since my client_id for one is part of the URL.

Any advice?

--
You received this message because you are subscribed to the Google Groups "Strava API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to strav...@googlegroups.com.

[Jonatan Samoocha]

https://fithaxx.com

Static frontend .js and html is hosted on AWS S3/Cloudfront. Python backend hosted on Heroku. Some of the data processing uses AWS Lambda functions. Security is done with JWT (containing encrypted user id so the backend knows who's making the request).

Feel free to ask additional questions :-)

[Steve Drake]

I host on Netlify

All secrets go in environment vars

I can run from my desktop

And it builds automatically from git

I have a function doing the work on the server

All for free

Get Outlook for iOS

---

From: strav...@googlegroups.com <strav...@googlegroups.com> on behalf of Jonatan Samoocha <fit...@gmail.com>
Sent: Saturday, July 11, 2020 7:29:32 AM
To: Strava API <strav...@googlegroups.com>
Subject: Re: Production Build Query

 

--

You received this message because you are subscribed to the Google Groups "Strava API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to strava-api+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/strava-api/0fe545f5-c3ca-4d1c-9080-9d1218e1db44o%40googlegroups.com.

[Geoff]

When you say you have a function doing the work on the server.. what do you mean? My app is built using create-react-app only. So unsure of how to store the auth token; currently it's in local storage but that wont be safe if I host in Netlify. Maybe I should just store in memory.

To unsubscribe from this group and stop receiving emails from it, send an email to strav...@googlegroups.com.

[Steve Drake]

LocalStorage is fine for the token

Having the secret in your client code is not good

Functions in netlify are a way to run JavaScript on the server

This is my client TS code

https://github.com/SteveDrakey/strava-search/blob/master/src/app/authentication/authentication.module.ts

And the callback functions are here ( not all are used, check what is called from above )

https://github.com/SteveDrakey/strava-search/tree/master/functions

Get Outlook for iOS

---

From: strav...@googlegroups.com <strav...@googlegroups.com> on behalf of Geoff <geoff....@gmail.com>
Sent: Saturday, July 11, 2020 11:02:00 PM

To unsubscribe from this group and stop receiving emails from it, send an email to strava-api+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/strava-api/c894dfcb-4528-42ba-b50a-b4246f5da7a1o%40googlegroups.com.

[Seth Geoghegan]

HI Geoff,

  Your intuition is correct regarding storing sensitive information client-side.  Problem is, your app is 100% in the client, with no server-side to rely on.  I can't profess to be an expert on all the possibilities, but I can describe how I handled the same problem.

  I have a React app that speaks to an API that I implemented with AWS Lambda.  In my particular implementation, the flow works as follows:

1. User clicks on "Connect with Stava" in my client-side React app, which presents the Strava oAuth permission window.  My React app only needs to know the Strava Client ID and Redirect URL, and neither is sensitive information I need to keep protected.
2. Once the user is done with the Stava login prompt, Strava redirects them back to my React app (via the redirect_url I sent in step 1).  My React app collects the *code* field provided by Strava and sends it off to my server-side for processing (this is the part you're missing).
3. The server-side is where all my secrets live (Strava Client Secret, Access Tokens, etc).  This is where I exchange those secrets for a user oAuth token, and store the token on the server side in my database.
4. The user gets a 200 response from my server-side if the auth succeeded.
5. Any calls to the Strava API that require a users oAuth token goes through my server-side.  This is also where I implement token refresh (if needed).

  I use AWS Lambda as my "server side", but you could use any technology.  Here is a good video describing the oAuth flow using Netlify functions (analogous to AWS Lambda).  When watching this video, pay close attention to where the data "lives".  The client doesn't know anything other than how to kick-off the request, everything else is handled outside of the client.  

  I know this may sound intimidating, but you're absolutely on the right track!  

  

  At the end of this flow, I have the Strava credentials stored securely on the server (AWS Lambda and DynamoDB in my case, but that's just an implementation detail).

[Bryant Likes]

Just to be clear, if you want to keep your client secret a secret, then you have to use a server side component to make the call to get the token. Doing it client side only will expose your client secret to anyone using the site.

--

Bryant

On Sun, Jul 12, 2020 at 4:17 PM Frédéric Bégin <frederic...@gmail.com> wrote:

Hey Geoff!

I've recently made a small app to visualize all activities and show a heatmap.

http://bifurkate.com/

My project is frontend only, made in React with GatsbyJS and hosted on Heroku.

It's on Github if you want to check the code: https://github.com/fredbegin11/bifurkate

The client_id is the id of your Strava App, not your personal account. You have to provide it.

Here's basically how I do it in my app to authenticate a user:

1) Redirect the user to https://www.strava.com/oauth/authorize?client_id=XYZ .....

2) Once the user has given access to my application, it redirect to my /callback page, with a "code" query param

3) On the /callback page, I do a POST request on https://www.strava.com/api/v3/oauth/token with the code received from step 2 to get an access token

4) Store the result of the token query (expires_at, refresh_token and access_token) somewhere (localStorage in my case)

5) Redirect to your app page

6) You're now authenticated and you can pass the access_token in all your Strava API requests

Hope that helps.

Cheers!

To unsubscribe from this group and stop receiving emails from it, send an email to strava-api+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/strava-api/2dcc6b20-49c7-435a-a01f-c2576e52417dn%40googlegroups.com.

[Frédéric Bégin]

Based on Bryant's comment, I've made changes in my app (https://www.bifurkate.com) to do the authentication call on the backend side.

So, here's basically how I do it now:

1) Redirect the user to https://www.strava.com/oauth/authorize?client_id=XYZ .....

2) Once the user has given access to my application, it redirects to my callback page, with a "code" query param

3) On the callback page, I do a POST request to my backend server, which calls https://www.strava.com/api/v3/oauth/token with the code received from step 2 to get an access token. The client secret is kept on the backend server.

4) I then store the result of the token query (expires_at, refresh_token and access_token) in the localStorage

5) I then do a redirect to my app page

6) I'm now authenticated and can get the access_token from the localstorage and pass it to all my Strava API requests

My frontend is on github of you want to check the code:
https://github.com/fredbegin11/bifurkate

My backend is basically two endpoints to handle the authentication and the refresh token call.

Good Luck!

[Geoff]

Hi Seth,

This makes a lot of sense. Thanks for the link to the Netlify functions video. Very interesting and something that Steve mentioned also.

[Geoff]

Nice one! Good to see an improvement based on the discussion. Thanks everyone for the input. I've a clear idea now of what I need to do. Can't wait to implement it :)

[Daniel D.]

https://github.com/dblock/slack-strava is https://slava.playplay.io/, ~100 paying customers.

--

You received this message because you are subscribed to the Google Groups "Strava API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to strava-api+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/strava-api/cdf36e17-cd30-4be3-8f29-0f73738b8099o%40googlegroups.com.

--

dB. | Moscow - Geneva - Seattle - New York
code.dblock.org - t:@dblockdotorg - ig:@artdblockdotorg - github/dblock