@synqauth/react-native 0.2.0 → 0.3.0

package/README.md

@@ -4,7 +4,7 @@ Synq for React Native: sign-in through the system browser, with tokens in the de
 
 Synq is customer identity for businesses: an OpenID Connect issuer for each of your brands, with Solana wallet, social, email and passkey sign-in. The documentation is at [docs.synq.build](https://docs.synq.build).
 
-This package is at 0.x and hasn't been published yet: its API can change in any release until Synq's first customer depends on it.
+This package is at 0.x, so a minor release can change its API: see its CHANGELOG.md.
 
 ## Usage
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AccountClient, AuthorizationUrlOptions, ChallengeMethod, ChallengeProblem, DeniedReason, IdTokenClaims, RedirectReason, Session, StartSignInOptions, SynqClient, SynqError, SynqStorage } from "@synqauth/js";
+import { AccountClient, AuthorizationUrlOptions, AvatarInfo, AvatarPerson, AvatarStyle, ChallengeMethod, ChallengeProblem, DeniedReason, IdTokenClaims, RedirectReason, Session, StartSignInOptions, SynqClient, SynqError, SynqStorage } from "@synqauth/js";
 import { ReactNode } from "react";
 //#region src/storage.d.ts
 /** The part of `expo-secure-store` the SDK uses: pass the module itself. */
@@ -128,6 +128,26 @@ interface UseUser {
 }
 /** Who is signed in, and their account. */
 export declare function useUser(): UseUser;
+/** What `useAvatar()` answers: what the avatar is drawn from, and Synq's own default as SVG. */
+interface UseAvatar extends AvatarInfo {
+  /**
+   * Synq's own default for them, as SVG markup (`avatarSvg`): draw it with
+   * react-native-svg's `SvgXml`, clipped to a circle, where no picture of
+   * theirs or of the app's own shows.
+   */
+  readonly svg: string;
+}
+/**
+ * What the avatar of `user` is drawn from (AERO-2704): the signed-in person
+ * by default, from their ID token, or anyone as Synq names them (`id` and
+ * `username` from the management API work too). Show `picture` when its
+ * `source` is one the app shows; else the app's own art from `seed`
+ * (`defaultPick` over its set); else `defaultPicture`; else `svg`. Null
+ * while there is nobody.
+ */
+export declare function useAvatar(user?: AvatarPerson | null, options?: {
+  style?: AvatarStyle;
+}): UseAvatar | null;
 /** What `useAuth()` answers: signing in and out, each answering `{ data, error }`. */
 interface UseAuth {
   readonly isLoaded: boolean;
@@ -217,4 +237,4 @@ interface UseSignIn {
  */
 export declare function useSignIn(options?: StartSignInOptions): UseSignIn;
 //#endregion
-export type { SecureStoreModule, SignInHandover, SignInProblem, SignInStep, SynqNative, SynqNativeOptions, SynqNativeProviderProps, SynqResult, UseAuth, UseSession, UseSignIn, UseUser, WebBrowserModule };
+export type { SecureStoreModule, SignInHandover, SignInProblem, SignInStep, SynqNative, SynqNativeOptions, SynqNativeProviderProps, SynqResult, UseAuth, UseAvatar, UseSession, UseSignIn, UseUser, WebBrowserModule };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { SynqError, accountApiUrl, createAccountClient, createSynqClient, isSynqError } from "@synqauth/js";
+import { SynqError, accountApiUrl, avatarOf, avatarSvg, createAccountClient, createSynqClient, isSynqError } from "@synqauth/js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/storage.ts
@@ -213,6 +213,29 @@ function useUser() {
 		account
 	};
 }
+/**
+* What the avatar of `user` is drawn from (AERO-2704): the signed-in person
+* by default, from their ID token, or anyone as Synq names them (`id` and
+* `username` from the management API work too). Show `picture` when its
+* `source` is one the app shows; else the app's own art from `seed`
+* (`defaultPick` over its set); else `defaultPicture`; else `svg`. Null
+* while there is nobody.
+*/
+function useAvatar(user, options = {}) {
+	const { state } = useSynq();
+	const person = user ?? state.session?.claims ?? null;
+	return useMemo(() => {
+		if (!person) return null;
+		const avatar = avatarOf(person);
+		return {
+			...avatar,
+			svg: avatarSvg(avatar.seed, {
+				style: options.style,
+				initials: avatar.initials
+			})
+		};
+	}, [person, options.style]);
+}
 /** Signing in and out. */
 function useAuth() {
 	const { synq, state } = useSynq();
@@ -407,4 +430,4 @@ function useSignIn(options = {}) {
 	};
 }
 //#endregion
-export { CHUNK_SIZE, SynqNativeProvider, createSynqNative, secureStorage, useAuth, useSession, useSignIn, useUser };
+export { CHUNK_SIZE, SynqNativeProvider, createSynqNative, secureStorage, useAuth, useAvatar, useSession, useSignIn, useUser };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synqauth/react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Synq for React Native: sign-in through the system browser, with tokens in the device's secure storage.",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@synqauth/js": "0.2.0"
+    "@synqauth/js": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0"