CODEWITHSUNDEEP
reactjsoauth-2.0refresh-tokenfitbitapi-authorization
Jeroen
Jeroen

Reputation: 31

OAuth 2.0 Authorization Code Grant implementation in React / TypeScript App

I'm currently building a React/TypeScript app that uses the Fitbit and Oura API to get data and transform that data into a weekly dashboard. I'm a frontend dev and do not have any backend experience.

As both APIs require OAuth2 authentication using the Authorization Code Grant (server side) method I need to have the possibility to send a token to a server and have that server automatically request the access token from the API and send that back to my app.

I'm currently using Google Firebase to manage data, but didnt seem to find how to do this in Firebase.

What would you advice to use as the most efficient and low-level (low-tech) integration for a frontend dev to make this work properly?

I dont know if it matters, but i'm using the useOAuth2 package from '@tasoskakour/react-use-oauth2' (see current Implicit Flow example below)

import { useOAuth2 } from '@tasoskakour/react-use-oauth2'

type AuthorizeApi = {
    url: string
    id: string
    scope: string
}

function AuthorizeWearableButton({ url, id, scope }: AuthorizeApi) {
    const { data, loading, error, getAuth } = useOAuth2({
        authorizeUrl: url,
        clientId: id,
        redirectUri: `${document.location.origin}/callback`,
        responseType: 'token',
        scope,
        onSuccess: (payload) => console.log('Success', payload),
        onError: (error_) => console.log('Error', error_),
    })

    return (
        <button
            className="rounded-lg px-12 py-8 bg-green-600 text-white"
            type="button"
            onClick={() => getAuth()}
        >
            Authorize
        </button>
    )
}

export default AuthorizeWearableButton

Upvotes: 1

Views: 838

Answers (1)

Arman
Arman

Reputation: 21

I am facing the exact issue, I am trying to figure out how to use firebase-auth module to Authenticate the users, I'm trying to create a custom oauth handlers so I can add Fitbit as a auth provider in google firebase console, but still no luck. To go further and have data for a start I tweaked Fitbit_api and to get access token I have created a service in "G! Cloud Run" you can see it here Fitbit OAuth Service. I also had to implement how to create code_challenge and code_verifier. I know it's not a good solution and the way it is now harbors a lot of security and operational risks, Nevertheless it's a start and works. here is the link of my code. Fitbit_api

I really appreciate you updating how you've progressed... or anyone else with more information.

Upvotes: 0

Related Questions