feat(sig): Add GitHub connection banner to inbox report list#1561
feat(sig): Add GitHub connection banner to inbox report list#1561
Conversation
Show a floating banner at the bottom of the report list pane indicating whether the user has linked their GitHub account. When connected, shows the GitHub handle. When not, provides a button to start the OAuth flow and refetches user data when the window regains focus. Generated-By: PostHog Code Task-Id: 3089dc72-e26f-4715-8999-1a194fc7030c
|
looks like there is some overlap here with the report items |
| import { queryClient } from "@utils/queryClient"; | ||
| import { useEffect, useRef } from "react"; | ||
|
|
||
| export function GitHubConnectionBanner() { |
There was a problem hiding this comment.
i tried this in dev and the auth flow worked, but the banner never went away -- maybe expected cuz dev?
however, why do we need to show this always?
- we should already have the user's github details, twice actually (once from signals onboarding, another from
ghsetup) - and for clean-UI-reasons i think we should hide this if we already have their details
There was a problem hiding this comment.
On the global comment (threads are much better!): Great catch, didn't realize the background there is translucent. Fixing.
As for the banner not disappearing, I think I know why – we only recheck on app focus, and without any polling, so that can get clunky. I'll fix it so that after clicking we go into a "Waiting for auth to complete" state that also gently polls.
We do hide this after we have their details!
There was a problem hiding this comment.
nice, thank you!
how do we detect details for hiding it? it was there when i opened in dev, and i'm pretty sure i have the github integration set up on the project (i was using team 2) and definitely have gh auth'd
There was a problem hiding this comment.
Ah, I'm just dumb – I didn't push it :picard: Basically when you have GitHub auth linked → banner = null.
There was a problem hiding this comment.
I missed your first point:
we should already have the user's github details
This is not the case because connecting your repo(s) and connecting your account are two different things. I would love to combine them, but they're distinct at the API level. In fact one is served by our GitHub GitHub app, while the other by our GitHub OAuth app (makes sense, right).
I've tweaked the wording on the new button's tooltip to make that clearer.
There was a problem hiding this comment.
ah i see… does this means we potentially have 3 different github auth flows? github app, oauth app, gh cli?
if so, i think we need to make that much easier
can we do one of these things?
- combined auth flow for oauth + github app (i believe i saw this is possible?) then gh cli is separate (in this case we can also stop relying so heavily on gh cli in general, which would be excellent!)
- or, have this new banner try to read user data from the gh cli first, so this oauth flow is not necessary in most cases? we already have a pretty hard dependency on the gh cli in posthog code, so it should almost always be available
There was a problem hiding this comment.
sorry this is claude slop and i will dig in further lol, but sharing in case this makes any sense to you as i'm sure you're more familiar with the gh auth flows:
- Build a GitHub App (not a plain OAuth App).
- Use the GitHub App's user authorization flow to get a user-to-server token — this covers the "OAuth" side (acting on behalf of the user).
- Use the app's installation access token (JWT → installation token exchange) for app-level operations that don't need a user context.
You don't get both tokens from one redirect, but the user only sees one authorization prompt (the GitHub App authorization). You then separately mint the installation token server-side using your app's private key — no additional user interaction required.
There was a problem hiding this comment.
I dug into this and this is true! I've figured out a way to do this linking efficiently:
- When the user sets up the project's GitHub integration for repo access, that's when we now save their login on the Integration model. Makes the initial PH Code experience seamless.
- For other users (e.g. those onboarding to PH Code when repo access is already set up for the project), we still rely on the social auth link. This in turn means this seamless for existing login-via-GitHub users.
Everyone wins. Thanks for pushing this point usefully!
There was a problem hiding this comment.
let's go!!!!!
thank you for checking in there 🫡 and apologies (now and in advance) for being so nitpicky on all the UX stuff, just trying to make sure we have something as buttery sexy smooth as possible for launch ❤️
2 participants
Summary
Adds a floating banner at the bottom of the inbox report list pane showing GitHub connection status. The button links to
/login/github/to start the OAuth linking flow & refetches user data when the app window regains focus.Companion backend PR: PostHog/posthog#53767
Created with PostHog Code