Search code examples
reactjsauthenticationoauth-2.0google-analyticsjwt

React - How to connect a Dashboard to Google Analytics API with client logins?


I recently took on a project to build an Analytic's dashboard for the company I work for. I'm using react because I'm pretty familiar with it. I have successfully connected to google's api and setup the login page via "Login with Google" button. Everything was ready to go and I previewed it to my boss only to find out that isn't how they want it setup.

Previously my boss was working with a company to create a dashboard but they were taking 4-5 months every time a request was put in for a change or addition so they told the company to stop working on it. He showed me the half finished dashboard and once he logs in he has access to create users, then search our internal analytics account for clients we have access to and attached them to the login so when they login it only shows their analytics.

This is where I'm struggling a bit, I can see this unfinished dashboard seems to always be connected to our analytics accounts. Because when you search it lists the accounts in analytics we are connected too, then it perfectly attaches the account analytics to the user account which isn't a google account.

Long story short, I've been looking online how to achieve this but I think I lack the right question to ask google. I have read old posts saying to use a service account within the google dev console but that isn't a safe method. It also suggests using a Workload Identity Provider, which I read the docs it leads you to about using it and I feel its the answer, accept, I have no idea how to set it up. Or I don't think I'm asking the right question to find the answers I need or where to start.

Should I start with creating a user database api? I think I might be thinking too hard on this because I keep circling back to "If I create a user database, how do I connect that user login with google api to verify without using a google login?"

(I'm not a professional react developer, I only took a software engineering course and find most of my enjoyment working with react so I'm doing my best to further my knowledge with react so I can become more proficient with it.)


Solution

  • He showed me the half finished dashboard and once he logs in he has access to create users,

    If it has access to create users they are going though the Management API. This has that power.

    Then search our internal analytics account for clients we have access to and attached them to the login so when they login it only shows their analytics

    The management api also has a way of listing all the accounts that you have access to though the account summaries endpoint.

    it perfectly attaches the account analytics to the user account which isn't a google account.

    If your system has its own internal users its not hard to link the Google analytics refresh token to the users internal account. Just store it along with your user.

    Im not a react developer, i have very little knowledge of these javascript frameworks. To be clear refresh tokens will only work on server sided programming languages.