Sign In with GitHub and Firebase Auth | React Native Expo 49 | TypeScript | Code with Beto

Learn how to add GitHub sign-in to your React Native app using Firebase Authentication and Expo SDK 49. You'll learn how to set up a Firebase project, configuring GitHub OAuth, and implementing the authentication flow with TypeScript and Expo Router.

If you want to build production-ready apps with GitHub OAuth or learn how to manage environment variables securely in Expo, this tutorial is for you. It also demonstrates testing on iOS and Android emulators and handling user sessions.

What's inside

Demo of GitHub sign-in flow on iOS and Android emulators
Setting up Firebase Authentication with GitHub provider
Creating a GitHub OAuth app and obtaining client ID and secret
Using Expo 49 and Expo Router for navigation and environment variables
Implementing authentication with TypeScript in React Native
Managing user sessions and sign-out behavior
Links to source code and documentation for GitHub OAuth scopes
Recommendations for related authentication projects on codewithbeto.dev

I start by showing a working demo app called Vibato running on both iOS and Android emulators. The app uses GitHub OAuth to authenticate users. When signing in, a web browser opens to request GitHub credentials and permissions. After approval, the app receives an access token and authenticates the user with Firebase.

The demo highlights that this flow works in production and persists user sessions. Closing and reopening the app keeps the user signed in until they explicitly sign out. The UI is basic but functional, showing the authenticated user's GitHub profile data.

Setting up Firebase Authentication with GitHub provider

You learn how to create a Firebase project and enable GitHub as an authentication provider. This involves entering the GitHub OAuth client ID and client secret in Firebase console. I show how to navigate Firebase Authentication settings and verify that users signing in with GitHub appear in the user list.

Firebase handles the backend authentication flow, linking GitHub OAuth tokens to Firebase user accounts. This setup is essential for integrating GitHub sign-in in your React Native app.

Creating a GitHub OAuth app and obtaining client ID and secret

To enable GitHub sign-in, you must create an OAuth application in your GitHub account settings under Developer Settings > OAuth Apps. I guides you to create a new OAuth app, specifying the app name, homepage URL, and callback URL.

Once created, GitHub provides a client ID and client secret. These credentials are required in Firebase Authentication to connect your app with GitHub's OAuth service. I explain where to find these values and how to keep them secure.

The project uses Expo SDK 49 and Expo Router for navigation. Expo Router simplifies routing and navigation flows in React Native apps. I show creating a new Expo app with the TypeScript template and selecting navigation options.

For environment variables like the GitHub client ID and secret, I recommend using a file and the package to securely share these variables without exposing them in source control. This approach helps keep sensitive data safe.

Implementing authentication with TypeScript in React Native

I demonstrate writing TypeScript code to handle the GitHub OAuth flow and Firebase authentication. It includes creating hooks and components for sign-in, sign-out, and user state management.

You see how to open the GitHub OAuth web browser, handle redirects, exchange authorization codes for tokens, and authenticate with Firebase using the access token. The code also manages scopes and permissions requested from GitHub.

Managing user sessions and sign-out behavior

Once authenticated, the app maintains the user session so users stay signed in across app restarts. I show how to detect the current user and navigate to the home screen automatically.

It also covers implementing a sign-out function that clears the session and returns the user to the sign-in screen. This ensures a smooth user experience and proper session management.

Links to source code and documentation for GitHub OAuth scopes

I share links to the full source code for this project in the codewithbeto.dev project section. I also provides links to GitHub OAuth documentation explaining scopes and permissions.

Understanding scopes is important because you can request additional access beyond basic authentication, such as managing repositories or following users. I encourage exploring these options to build powerful GitHub-integrated apps.

If you want to learn about other OAuth providers, I points to related projects on codewithbeto.dev, including Facebook and Google sign-in tutorials. These projects are free and cover similar authentication patterns with Firebase and React Native.

Exploring these resources can help you build comprehensive authentication flows for your apps.

Resources

CourseReact Native course

Master React Native fundamentals and build production apps with TypeScript and Expo.

Let's connect!

Sign In with GitHub and Firebase Auth | React Native Expo 49 | TypeScript