diff --git a/README.md b/README.md index 3bd1a68..759a5f4 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ # @thoughtbot/react-native-social-auth +[![npm version](https://img.shields.io/npm/v/@thoughtbot/react-native-social-auth.svg)](https://www.npmjs.com/package/@thoughtbot/react-native-social-auth) +[![npm downloads](https://img.shields.io/npm/dm/@thoughtbot/react-native-social-auth.svg)](https://www.npmjs.com/package/@thoughtbot/react-native-social-auth) +[![license](https://img.shields.io/npm/l/@thoughtbot/react-native-social-auth.svg)](https://github.com/thoughtbot/react-native-social-auth/blob/main/LICENSE) + **Modern Google Sign-In for React Native.** A typed, cross-platform `signIn()` API backed by Android's **Credential Manager** and the **GoogleSignIn-iOS SDK**, plus a branding-compliant `` component and a first-party **Expo config plugin**. TypeScript-first, ships as a **Turbo Module** for the new architecture, and works in both bare React Native CLI projects and Expo dev-client / EAS Build. **Platform support:** ✅ Android · ✅ iOS · ✅ Expo (dev-client / EAS Build) @@ -22,17 +26,21 @@ - React Native `>=0.74` with the new architecture enabled - Android `minSdkVersion` 24 - A Google Cloud project with OAuth 2.0 credentials (see [setup](#google-cloud-console-setup)) -- [`react-native-svg`](https://github.com/software-mansion/react-native-svg) `>=13.0.0` (peer dependency — used to render the Google "G" logo) +- [`react-native-svg`](https://github.com/software-mansion/react-native-svg) `>=13.0.0` — **optional** peer dependency, only required if you use [``](#googlesigninbutton-) (it renders the Google "G" logo) ## Installation ```sh -yarn add @thoughtbot/react-native-social-auth react-native-svg +yarn add @thoughtbot/react-native-social-auth # or -npm install @thoughtbot/react-native-social-auth react-native-svg +npm install @thoughtbot/react-native-social-auth ``` -> `react-native-svg` is a peer dependency. If it's not already in your app, install it explicitly — otherwise you'll see runtime errors like `Tried to register two views with the same name RNSVGRect`. +> If you use the pre-built [``](#googlesigninbutton-) component, also install `react-native-svg` and import the button from the `/google-button` subpath (see below). The core `GoogleSignIn` API has no SVG dependency. +> +> ```sh +> yarn add react-native-svg +> ``` After installing, rebuild the native app: @@ -153,7 +161,9 @@ This package ships an Expo config plugin so you don't have to hand-edit `Info.pl ### Install ```sh -npx expo install @thoughtbot/react-native-social-auth react-native-svg +npx expo install @thoughtbot/react-native-social-auth +# add react-native-svg too if you use : +npx expo install react-native-svg ``` ### Add the plugin @@ -200,10 +210,10 @@ You still call `GoogleSignIn.configure({ webClientId, iosClientId })` from JS at import { useState } from 'react'; import { GoogleSignIn, - GoogleSignInButton, isGoogleSignInError, type GoogleUser, } from '@thoughtbot/react-native-social-auth'; +import { GoogleSignInButton } from '@thoughtbot/react-native-social-auth/google-button'; GoogleSignIn.configure({ webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', @@ -230,7 +240,7 @@ export function SignInScreen() { ## API reference -All members are named exports from `@thoughtbot/react-native-social-auth`. +All members are named exports from `@thoughtbot/react-native-social-auth`, except [``](#googlesigninbutton-), which is exported from the `@thoughtbot/react-native-social-auth/google-button` subpath. ### `GoogleSignIn` @@ -302,6 +312,12 @@ See [`signIn`](#signin-promisegoogleauthcredential) above. A pre-built button that conforms to the [official Google branding guidelines](https://developers.google.com/identity/branding-guidelines). The button renders the Google "G" via `react-native-svg`, so it stays crisp at any density without bundling raster assets. +Because of that, it's exported from a dedicated subpath and `react-native-svg` must be installed to use it: + +```tsx +import { GoogleSignInButton } from '@thoughtbot/react-native-social-auth/google-button'; +``` + | Prop | Type | Default | Description | | ---------- | ------------------------------------------ | ------------ | -------------------------------------------------------------------- | | `theme` | `'light' \| 'dark' \| 'neutral'` | `'light'` | Visual theme. Picks the right background, border, and text color. | diff --git a/example/src/App.tsx b/example/src/App.tsx index 4babf8c..6aee31f 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -9,11 +9,11 @@ import { } from 'react-native'; import { GoogleSignIn, - GoogleSignInButton, isGoogleSignInError, GoogleSignInErrorCode, type GoogleUser, } from '@thoughtbot/react-native-social-auth'; +import { GoogleSignInButton } from '@thoughtbot/react-native-social-auth/google-button'; const WEB_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID ?? ''; const IOS_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID; diff --git a/package.json b/package.json index 41251a0..aab61d8 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,11 @@ "types": "./lib/typescript/src/index.d.ts", "default": "./lib/module/index.js" }, + "./google-button": { + "source": "./src/google-button.tsx", + "types": "./lib/typescript/src/google-button.d.ts", + "default": "./lib/module/google-button.js" + }, "./package.json": "./package.json", "./app.plugin.js": "./app.plugin.js" }, @@ -123,6 +128,9 @@ "peerDependenciesMeta": { "@expo/config-plugins": { "optional": true + }, + "react-native-svg": { + "optional": true } }, "workspaces": [ diff --git a/src/google-button.tsx b/src/google-button.tsx new file mode 100644 index 0000000..97eeeae --- /dev/null +++ b/src/google-button.tsx @@ -0,0 +1,8 @@ +export { GoogleSignInButton } from './google/GoogleSignInButton'; +export type { + GoogleSignInButtonProps, + GoogleSignInButtonTheme, + GoogleSignInButtonShape, + GoogleSignInButtonText, + GoogleSignInButtonSize, +} from './google/GoogleSignInButton'; diff --git a/src/google/index.ts b/src/google/index.ts index 63fee7d..d2dc48b 100644 --- a/src/google/index.ts +++ b/src/google/index.ts @@ -4,14 +4,6 @@ export { GoogleSignInErrorCode, isGoogleSignInError, } from './errors'; -export { GoogleSignInButton } from './GoogleSignInButton'; -export type { - GoogleSignInButtonProps, - GoogleSignInButtonTheme, - GoogleSignInButtonShape, - GoogleSignInButtonText, - GoogleSignInButtonSize, -} from './GoogleSignInButton'; export type { GoogleSignInConfig, GoogleUser, diff --git a/src/index.tsx b/src/index.tsx index 4394ed0..6e1f73a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,17 +1,11 @@ export { GoogleSignIn, - GoogleSignInButton, GoogleSignInError, GoogleSignInErrorCode, isGoogleSignInError, } from './google'; export type { - GoogleSignInButtonProps, - GoogleSignInButtonTheme, - GoogleSignInButtonShape, - GoogleSignInButtonText, - GoogleSignInButtonSize, GoogleSignInConfig, GoogleUser, GoogleAuthCredential, diff --git a/tsconfig.json b/tsconfig.json index a7c3aee..e16e246 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,10 @@ "compilerOptions": { "rootDir": ".", "paths": { - "@thoughtbot/react-native-social-auth": ["./src/index"] + "@thoughtbot/react-native-social-auth": ["./src/index"], + "@thoughtbot/react-native-social-auth/google-button": [ + "./src/google-button" + ] }, "allowUnreachableCode": false, "allowUnusedLabels": false, diff --git a/yarn.lock b/yarn.lock index 01aca70..9700e06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4624,6 +4624,8 @@ __metadata: peerDependenciesMeta: "@expo/config-plugins": optional: true + react-native-svg: + optional: true languageName: unknown linkType: soft