Skip to content

feat: Add keychain persistence plugin for React Native #607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BadLice wants to merge 2 commits into
base: main
Choose a base branch
from
+1,136 −1
Open

feat: Add keychain persistence plugin for React Native #607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06cb7cf
add react-native-keychain
BadLice Jul 10, 2025
09271d3
create observablePersistKeychain persist plugin
BadLice Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion bun.lock
100755 → 100644
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"prettier": "^3.4.2",
"react": "18.3.1",
"react-native": "^0.74.1",
"react-native-keychain":"^10.0.0",
"react-native-mmkv": "^2.12.2",
"react-test-renderer": "^18.3.1",
"release-it": "^17.3.0",
Expand Down
150 changes: 150 additions & 0 deletions src/persist-plugins/keychain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import type { Change } from '@legendapp/state';
import { applyChanges, internal } from '@legendapp/state';
import type { ObservablePersistKeychainPluginOptions, ObservablePersistPlugin } from '@legendapp/state/sync';
import {
hasGenericPassword,
getGenericPassword,
resetGenericPassword,
setGenericPassword,
} from 'react-native-keychain';

const { safeParse, safeStringify } = internal;

export class ObservablePersistKeychain implements ObservablePersistPlugin {
private data: Record<string, unknown> = {};
private configuration: ObservablePersistKeychainPluginOptions;

constructor(configuration?: ObservablePersistKeychainPluginOptions) {
this.configuration = configuration ?? {};
}
public async initialize() {
const { preload } = this.configuration;
if (preload && preload.length > 0) {
await Promise.all(
preload.map(async (table) => {
try {
const credentials = await this.getIfExists(table);
this.data[table] =
credentials && credentials.password ? safeParse(credentials.password) : undefined;
} catch (error) {
console.error('[legend-state] ObservablePersistKeychain failed to preload table', table, error);
this.data[table] = undefined;
this.configuration.onError?.(table, error, 'preload');
}
}),
);
}
}
public loadTable(table: string): void | Promise<void> {
if (this.data[table] === undefined) {
return this.getIfExists(table)
.then((credentials) => {
try {
this.data[table] =
credentials && credentials.password ? safeParse(credentials.password) : undefined;
} catch (error) {
console.error('[legend-state] ObservablePersistKeychain failed to parse', table, error);
this.configuration.onError?.(table, error, 'load');
this.data[table] = undefined;
}
})
.catch((error: Error) => {
if (error?.message !== 'UserCancel') {
console.error('[legend-state] Keychain.getGenericPassword failed', table, error);
}
this.data[table] = undefined;
this.configuration.onError?.(table, error, 'load');
});
}
}
public getTable<T = unknown>(table: string, init: object): T {
return (this.data[table] as T) ?? (init as T) ?? (undefined as T);
}
/**
* Metadata operations are not supported for keychain storage
*/
public getMetadata(): Record<string, unknown> {
return {};
}
public set(table: string, changes: Change[]): Promise<void> {
if (!this.data[table]) {
this.data[table] = {};
}

this.data[table] = applyChanges(this.data[table] as object, changes);
return this.save(table);
}
/**
* Metadata operations are not supported for keychain storage
*/
public setMetadata(): Promise<void> {
return Promise.resolve();
}
public async deleteTable(table: string): Promise<void> {
try {
await resetGenericPassword({
service: table,
...this.configuration.options,
});
delete this.data[table];
} catch (error) {
console.error('[legend-state] ObservablePersistKeychain failed to delete table', table, error);
this.configuration.onError?.(table, error, 'delete');
}
}
/**
* Metadata operations are not supported for keychain storage
*/
public deleteMetadata(): Promise<void> {
return Promise.resolve();
}
private async save(table: string): Promise<void> {
const value = this.data[table];

try {
if (value !== undefined && value !== null) {
const serializedValue = safeStringify(value);
await setGenericPassword(
table, // Use table name as username
serializedValue,
{
service: table,
...this.configuration.options,
},
);
} else {
// Remove the entry if value is undefined or null
await resetGenericPassword({
service: table,
...this.configuration.options,
});
delete this.data[table];
}
} catch (error) {
console.error('[legend-state] ObservablePersistKeychain failed to save', table, error);
this.configuration.onError?.(table, error, 'save');
throw error;
}
}
/**
* getGenericPassword could take several seconds in low-spec devices, so we first check credentials presence with hasGenericPassword since it is a lightweight check and does not incur the same overhead.
*/
private async getIfExists(table: string) {
if (
!(await hasGenericPassword({
service: table,
...this.configuration.options,
}))
) {
return undefined;
}
return await getGenericPassword({
service: table,
...this.configuration.options,
});
}
}

export function observablePersistKeychain(configuration?: ObservablePersistKeychainPluginOptions) {
return new ObservablePersistKeychain(configuration);
}
8 changes: 8 additions & 0 deletions src/sync/syncTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import type { MMKVConfiguration } from 'react-native-mmkv';
// @ts-ignore
import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
// @ts-ignore
import type { GetOptions, SetOptions } from 'react-native-keychain';

import type {
Change,
Expand Down Expand Up @@ -112,6 +114,12 @@ export interface SyncedOptionsGlobal<T = any>
persist?: ObservablePersistPluginOptions & Omit<PersistOptions, 'name' | 'transform' | 'options'>;
}

export interface ObservablePersistKeychainPluginOptions {
preload?: string[];
options?: GetOptions & SetOptions;
onError?: (table: string, error: unknown, on: 'preload' | 'load' | 'delete' | 'save') => void;
}

export interface ObservablePersistIndexedDBPluginOptions {
databaseName: string;
version: number;
Expand Down
Loading