Authentication consistently ranks among the trickier parts of app development, given that it forms a primary barrier protecting your software from intruders.

A wide range of strategies exists for handling authentication, and one common approach involves leaning on authentication providers—trusted services that verify a person's identity on your behalf. Most users have encountered this model already, whether through prompts to "Sign in with Microsoft" or "Log in with Google".

The focus here is on steps for setting up PocketBase with GitHub serving as your Angular application's authentication provider; below you'll find a plan of our target setup:

Demo Final Result

📝 If you want to work through this material yourself, you can grab the sample code from this repo and progress through it branch by branch, beginning with 01-initial-setup.

Introducing PocketBase

PocketBase falls into the Backend as a Service (BaaS) category, just like FireBase, SupaBase, Appwrite, and countless similar offerings.

Yet unlike those alternatives, PocketBase ships as one lone executable, which makes local execution or self-hosting remarkably straightforward. Competing services frequently demand connecting to a hosted cloud environment or spinning up multiple Docker containers for the same effect.

PocketBase homepage

PocketBase positions itself as a complete backend service, handling authentication, an embedded database, live subscriptions, and built-in user management.

Beyond those core functions, it offers additional capabilities. To explore them, check out its documentation or take the online demo for a hands-on try.

There is also a pretty good video of Fireship on the subject:

Integrating GitHub OAuth with PocketBase

The backend needs to be configured in our Angular project before we can start using it.

🌲 Kick off from the 01-initial-setup branch; you'll wrap up on 02-pocketbase-installation.

Setting Up PocketBase

PocketBase ships as a standalone binary, retrievable from the docs' direct link or the GitHub releases page.

📝 At the time of writing, PocketBase is at version 0.22.19

After extracting the archive, move pocketbase.exe into the Angular project. My copy lives at pocketbase/pocketbase.exe:

PocketBase installation

After adding PocketBase to your project, start it by executing pocketbase serve, and the terminal should display something like this:

PocketBase Output

When PocketBase boots, it also generates several files on its own, which hold the initial configuration.

At this point, head over to http://127.0.0.1:8090/_/ and you'll be prompted for the admin credentials for this PocketBase instance. That account has the rights to modify the backend's configuration, introduce new tables or routes, and perform a variety of other tasks:

Admin Creation Prompt

After the account is created, the app should automatically take you to the admin dashboard:

Admin Dashboard

Everything is ready to go.

Registering GitHub as an OAuth Provider

To get GitHub working as an OAuth provider, the first step is obtaining credentials from the platform by registering your application there.

To make a new OAuth application, go to https://github.com/settings/apps and select OAuth Apps. After that, use the New OAuth App button located at the top right.

The form will request various details that you can fill according to your preferences. One exception is the Authorization callback URL, which belongs to PocketBase and must point to /api/oauth2-redirect on your server. For us, that means using the URL http://localhost:8090/api/oauth2-redirect:

GitHub OAuth App Creation

Once the app is created, grab the Client ID and create a fresh Client secrets entry, then copy that value too.

Return to the PocketBase admin dashboard and select the wrench icon from the sidebar, which takes you to http://127.0.0.1:8090/_/#/settings. Next, choose the Auth providers option under the Authentication category. In the provider list, GitHub should be present:

Providers List

Selecting the cog icon brings up a menu where you can enter the details from the OAuth application we just set up.

GitHub Provider Configuration

After completing the form, clicking on Save changes will reveal that GitHub is now listed as an active provider:

Providers List with GitHub enabled

With that, our PocketBase backend is now set up to leverage GitHub as an OAuth provider!

Consuming PocketBase from our Angular Application

With the backend up and running—and OAuth2 properly configured—you can start interacting with it just like any other server.

🌲 Kick off from the 02-pocketbase-installation branch, and the finished version will be on 03-consuming-pocketbase.

Initializing the Client

To hit the ground running with PocketBase in any JS environment, the simplest route is their JS Client-side SDK, which is hosted on GitHub.

First, we’ll install the required package:

pnpm install pocketbase
Enter fullscreen mode Exit fullscreen mode

After completing that step, a fresh client can be created by passing the URL where PocketBase operates:

import PocketBase from 'pocketbase';
const pb = new PocketBase('http://127.0.0.1:8090');
Enter fullscreen mode Exit fullscreen mode

Angular’s dependency injection system offers another route: we can integrate it with an injection token instead.

// 📂 src/app/pocketbase.provider.ts
export const PocketBaseClient = new InjectionToken<PocketBase>(
  'PocketBase client',
);
Enter fullscreen mode Exit fullscreen mode

Now we can define a method that takes care of instantiating the PocketBase client on our behalf:

// 📂 src/app/pocketbase.provider.ts
export const providePocketBase = (baseUrl: string): EnvironmentProviders =>
  makeEnvironmentProviders([
    {
      provide: PocketBaseClient,
      // 👇 You could also inject `environment` here instead
      useFactory: () => new PocketBase(baseUrl),
    },
  ]);
Enter fullscreen mode Exit fullscreen mode

Next, the provider needs to be registered inside main.ts:

// 📂 src/main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(),
+   providePocketBase('http://localhost:8090'),
  ],
}).catch((err) => console.error(err));
Enter fullscreen mode Exit fullscreen mode

The client can now be provided to the AuthenticationService through injection:

// 📂 src/app/authentication.service.ts

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
+ readonly #pocketBase = inject(PocketBaseClient);
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Implementing Authentication with PocketBase

Authentication is handled entirely by PocketBase, so we skip orchestrating the sign-in flow ourselves. Our only job is to specify what should happen when the authentication state shifts.

The authStore in PocketBase handles authentication management and its events.

Here, we aim to refresh the user's name on each sign-in, achieved by registering a callback:

// 📂 src/app/authentication.service.ts
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  // ...

+ constructor() {
+   this.#pocketBase.authStore.onChange((_token, user) => {
+     this.#userName.set(user?.['username'] ?? null);
+   });
+ }

  // ...
}
Enter fullscreen mode Exit fullscreen mode

Signing Methods

Almost everything is set up at this point; only the actual sign-in and sign-out routines remain to be implemented.

Signing out requires a minimal amount of code — all it does is wipe the authStore held by PocketBase:

// 📂 src/app/authentication.service.ts
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  // ...

  signOut(): void {
-   this.#userName.set(null);
+   this.#pocketBase.authStore.clear();
  }
}
Enter fullscreen mode Exit fullscreen mode

Authentication is just as simple to implement, as the heavy lifting is left entirely to PocketBase and its SDK. The only requirement on our side is to start the auth flow for the users collection, specifying github as the provider.

Because this operation returns a Promise, we can seamlessly catch and display any error that may arise should the process fail:

// 📂 src/app/authentication.service.ts
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  // ...

  signInWithGithub(): void {
-   this.#userName.set('pBouillon');
+   this.#pocketBase
+     .collection('users')
+     .authWithOAuth2({ provider: 'github' })
+     .catch((error) => console.log(error.originalError));
  }
}
Enter fullscreen mode Exit fullscreen mode

Go ahead and launch the demo once more — signing in through your GitHub account should now work as expected.

Demo Final Result

You've made it — your Angular app now authenticates users through GitHub as the OAuth provider 🎉

📝 There's still room to enhance this setup: you could build a mechanism that checks whether a user is already logged in each time the page loads. Storing their details in a cookie and reading it on startup is one way; explore the authServer#exportToCookie method to get started.

Wrapping up

With all the code in place and the demo running smoothly, we've accomplished our goal: a PocketBase-powered backend that relies on GitHub for authentication.

Adding another provider—whether it's Microsoft, Google, Facebook, or even Discord—follows nearly the same pattern, though a few providers come with their own quirks.

But PocketBase offers far more than auth alone. I strongly suggest exploring its full feature set: data management, table views, log history, custom API routes, data migrations, and plenty more.

From what I've seen, PocketBase shines in side projects where you want to hit the ground running without sweating over building a bespoke backend.

And with self-hosting options or free services like PocketHost, taking your app live is straightforward.

For deeper insights, check out the docs, or explore this article's repository:

GitHub logo pBouillon / DEV.GitHubAuthWithPocketBase

Demo code for the "Using GitHub as an Authentication Provider in Your Angular App with PocketBase" article on DEV

Using GitHub as an Authentication Provider in Your Angular App with PocketBase

Demo code for the "Using GitHub as an Authentication Provider in Your Angular App with PocketBase" article on DEV




View on GitHub


I hope your learned something useful!

pbouillon image

Pierre Bouillon

Software Engineer | Full Stack Developer | Coffee Lover

Photo by Nicole Geri on Unsplash