I need help with a tricky authentication setup. I have a web application where users log in through Twitch OAuth. The flow works perfectly on the website - first time users get accounts created automatically and returning users just sign in normally. I store login status using PHP sessions.
Now I want to build a Chrome extension that shows user data in a popup window. The problem is that Twitch OAuth requires a redirect URI but Chrome extensions don’t work the same way as regular websites.
I tried using webviews and embedding iframes but nothing worked so far. Has anyone solved this kind of OAuth flow in a Chrome extension before? What’s the best approach to handle the redirect URI requirement when working with browser extensions?
Been working with Chrome extensions for years and hit this same problem tons of times. Use chrome.identity.launchWebAuthFlow() - it’s the right approach, but there’s one thing everyone misses. You’ve got to register your redirect URI in Twitch’s dev console with their specific format: https://your-extension-id.chromiumapp.org/ - notice it’s chromiumapp.org, not the chrome-extension protocol. Chrome automatically maps OAuth redirects to this domain for extensions. Grab the auth code from the callback, then swap it for an access token through your backend API. Two gotchas: Your extension ID changes during development unless you pin it with a key field in the manifest. And don’t forget the identity permission plus Twitch API URLs in host permissions. This setup works great with Twitch and other OAuth providers.
try chrome.identity.launchWebAuthFlow() for OAuth. it’s way better than using iframes, just make sure to add https://your-extension-id.chromiumapp.org/ as the redirect URI in your twitch settings. works like a charm!
Had the same problem with Twitch OAuth last year. You need to set up your redirect URI correctly in the Twitch app config. Use the chrome-extension:// protocol with your extension ID - like chrome-extension://your-extension-id/oauth.html. Make a simple HTML file in your extension folder to handle the callback and grab the auth code from the URL params. Use chrome.identity API for the flow. Don’t forget to add the identity permission in manifest.json and declare your oauth.html file. The annoying part is keeping your extension ID the same between dev and production - add a key field to your manifest to lock it down.