The PocketBase API uses JWT tokens for authentication via the Authorization HTTP header:
Authorization: TOKEN.
You can also use the dedicated auth SDK helpers as shown in the examples below.
Authenticate as admin
You can authenticate as admin using an email and password. Admins can access everything and API rules don't apply to them.
import PocketBase from 'pocketbase';
const pb = new PocketBase('http://127.0.0.1:8090');
...
const authData = await pb.admins.authWithPassword('test@example.com', '1234567890');
// after the above you can also access the auth data from the authStore
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model.id);
// "logout" the last authenticated account
pb.authStore.clear();
import 'package:pocketbase/pocketbase.dart';
final pb = PocketBase('http://127.0.0.1:8090');
...
final authData = await pb.admins.authWithPassword('test@example.com', '1234567890');
// after the above you can also access the auth data from the authStore
print(pb.authStore.isValid);
print(pb.authStore.token);
print(pb.authStore.model.id);
// "logout" the last authenticated account
pb.authStore.clear();
Authenticate as app user
The easiest way to authenticate your app users is with their username/email and password.
You can customize the supported authentication options from your Auth collection configuration
(including disabling all auth options).
import PocketBase from 'pocketbase';
const pb = new PocketBase('https://pocketbase.io');
...
const authData = await pb.collection('users').authWithPassword('YOUR_USERNAME_OR_EMAIL', '1234567890');
// after the above you can also access the auth data from the authStore
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model.id);
// "logout" the last authenticated model
pb.authStore.clear();
import 'package:pocketbase/pocketbase.dart';
final pb = PocketBase('https://pocketbase.io');
...
final authData = await pb.collection('users').authWithPassword('YOUR_USERNAME_OR_EMAIL', '1234567890');
// after the above you can also access the auth data from the authStore
print(pb.authStore.isValid);
print(pb.authStore.token);
print(pb.authStore.model.id);
// "logout" the last authenticated model
pb.authStore.clear();
You can also authenticate your users with an OAuth2 provider (Google, GitHub, Microsoft, etc.). See the section below for an example OAuth2 web integration.
Web OAuth2 integration
Once you have obtained the Client Id and Client Secret, you can enable and configure the provider from your PocketBase admin settings page.
In general, when authenticating with OAuth2 you'll need 2 client-side endpoints - one to show the "Login with ..." links and another one to handle the provider's redirect in order to exchange the auth code for token. Here is a simple web example:
Links page (eg. https://127.0.0.1:8090 serving
pb_public/index.html):<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>OAuth2 links page</title> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> </head> <body> <ul id="list"> <li>Loading OAuth2 providers...</li> </ul> <script src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"></script> <script type="text/javascript"> const pb = new PocketBase('http://127.0.0.1:8090'); const redirectUrl = 'http://127.0.0.1:8090/redirect.html'; async function loadLinks() { const authMethods = await pb.collection('users').listAuthMethods(); const listItems = []; for (const provider of authMethods.authProviders) { const $li = $(`<li><a>Login with ${provider.name}</a></li>`); $li.find('a') .attr('href', provider.authUrl + redirectUrl) .data('provider', provider) .click(function () { // store provider's data on click for verification in the redirect page localStorage.setItem('provider', JSON.stringify($(this).data('provider'))); }); listItems.push($li); } $('#list').html(listItems.length ? listItems : '<li>No OAuth2 providers.</li>'); } loadLinks(); </script> </body> </html>Redirect handler page (eg. https://127.0.0.1:8090/redirect.html serving
pb_public/redirect.html):<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>OAuth2 redirect page</title> </head> <body> <pre id="content">Authenticating...</pre> <script src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"></script> <script type="text/javascript"> const pb = new PocketBase("http://127.0.0.1:8090"); const redirectUrl = 'http://127.0.0.1:8090/redirect.html'; // parse the query parameters from the redirected url const params = (new URL(window.location)).searchParams; // load the previously stored provider's data const provider = JSON.parse(localStorage.getItem('provider')) // compare the redirect's state param and the stored provider's one if (provider.state !== params.get('state')) { throw "State parameters don't match."; } // authenticate pb.collection('users').authWithOAuth2( provider.name, params.get('code'), provider.codeVerifier, redirectUrl, // pass optional user create data { emailVisibility: false, } ).then((authData) => { document.getElementById('content').innerText = JSON.stringify(authData, null, 2); }).catch((err) => { document.getElementById('content').innerText = "Failed to exchange code.\n" + err; }); </script> </body> </html>