Skip to content
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.

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

docs: document macOS support #14

Merged
merged 1 commit into from
May 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 5 additions & 3 deletions docs/buttons/native.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
# GoogleSigninButton

This is the sign in button that you can use in native apps. It renders `null` when used on the Web.
This is the sign in button that you can use in iOS and Android apps. It renders `null` when used on the Web.
On macOS, a simplified version of the button is rendered because the native SDK does not offer a button component for macOS.

The reason why you might want to use this native button is that it's localized out of the box, so the label will be translated to the currently active language automatically (if your localization is set up correcly - doing that is out of the scope for this guide).
You may _not_ want to use it because it's not very "visually attractive" - but you are free to design your own button.
The reason why you might want to use this native button is that it's localized out of the box, so the label will be translated to the currently active language automatically (if your localization is set up correctly - doing that is out of scope for this guide).

You may _not_ want to use it because it's not very visually appealing - but you are free to design your own button.

![signin button](/img/signin-button.png)

Expand Down
4 changes: 2 additions & 2 deletions docs/errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ TypeScript helper to check if the passed parameter is an instance of `Error` whi

`isErrorWithCode` can be used to avoid `as` casting when you want to access the `code` property on errors returned by the module.

:::tip
This functionality is only available to sponsors️. [It takes just a few clicks to get access](install#accessing-the-private-package-for-sponsors) ❤️.
:::note
`isErrorWithCode` is only available to sponsors️. [It takes just a few clicks to get access](install#accessing-the-private-package-for-sponsors) ❤️.
:::

```ts
Expand Down
21 changes: 7 additions & 14 deletions docs/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,25 @@ There are two ways to consume the package:

Available exclusively to GitHub sponsors, this version offers:

✅ One-tap sign-in support for [Android](https://developers.google.com/identity/android-credential-manager) and [Web](https://developers.google.com/identity/gsi/web/guides/features), fully compatible (same API) with iOS
✅ One-tap sign-in support for [Android](https://developers.google.com/identity/android-credential-manager) and [Web](https://developers.google.com/identity/gsi/web/guides/features), with an api compatibility layer for iOS and macOS (same apis across all platforms).

✅ Support for the [React Native New Architecture](https://reactnative.dev/docs/new-architecture-intro), including the [bridgeless mode](https://github.com/reactwg/react-native-new-architecture/discussions/154).

✅ Enhanced API functionalities: synchronous methods and more, plus minor bugfixes.
✅ Support for macOS (using react-native-macOS).

✅ Comprehensive documentation available on this site.

Your sponsorship enables continued maintenance and development of the module. Thank you for supporting this project! ❤️
Your sponsorship enables continued maintenance and development of the module and contributions to [downstream SDKs](https://github.com/openid/AppAuth-iOS/pull/788). Thank you for supporting this project! ❤️

### Public Version

Available on the public npm registry, this version does not include One-tap sign-in (= it uses the deprecated Google Sign-In for Android) and Web support found in the sponsor-only version.
Available on the public npm registry, this version does not include One-tap sign-in (= it uses the deprecated Google Sign-In for Android), Web and macOS support found in the sponsor-only version.

## Accessing the private package for sponsors

[Upon sponsoring](https://github.com/sponsors/vonovak) (please use specifically the tiers that mention this project!), you will get [immediate access \*](#invitation-note) to the private package and to the private repo with the sources and examples.
[Upon sponsoring](https://github.com/sponsors/vonovak) (please use specifically the tiers that mention this project!), you will get access to the private package and to the private repo with the sources and examples.

Three steps are needed to access the sponsored package, which is hosted on [GitHub npm packages registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry).
Three steps are needed to access the sponsor package, which is hosted on [GitHub npm packages registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry).

1. [Become a sponsor](https://github.com/sponsors/vonovak) and accept private repository [invitation *](#invitation-note) - it takes just a few clicks.
1. [Become a sponsor](https://github.com/sponsors/vonovak) and accept private repository invitation - it takes just a few clicks.

2. [Obtain here](https://github.com/settings/tokens) a Personal Access Token with `packages:read` permission.

Expand Down Expand Up @@ -85,8 +83,3 @@ There are several guides to follow now:
- [Web guide](setting-up/web) if you want to use the package on the Web
- If you're not using Expo but plain React Native, follow [Android guide](setting-up/android) and [iOS guide](setting-up/ios)

---

##### Invitation Note

As a sponsor, you will be added automatically if you sponsor from a personal account. If you sponsor from an organization account, please let me know and I'll add you manually. This is because of how [GitHub handles this case](https://docs.github.com/en/sponsors/receiving-sponsorships-through-github-sponsors/managing-your-sponsorship-tiers#about-adding-repositories-to-a-sponsorship-tier).
4 changes: 2 additions & 2 deletions docs/one-tap.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import Image from "@theme/IdealImage";

# One-tap Google sign in

This is the easiest and recommended way to implement Google Sign In. It is a sign in flow that (on Android) requires very little user interaction, thus increasing conversions. This api is available on Android, iOS and Web (with a little extra work [described below](#web-support)).
This is the easiest and recommended way to implement Google Sign In. It is a sign in flow that (on Android) requires very little user interaction, thus increasing conversions. This api is available on Android, iOS, macOS and Web (with a little extra work [described below](#web-support)).

- On Android, it is built on top of the [Credential Manager](https://developers.google.com/identity/android-credential-manager).

- On iOS, the provided API is a wrapper of the [iOS Google Sign In SDK](https://developers.google.com/identity/sign-in/ios/start-integrating), same as the [Original Google Sign In](original). This is so that you can use the same API for both Android and iOS.
- On iOS and macOS, the provided API is a wrapper of the [iOS Google Sign In SDK](https://developers.google.com/identity/sign-in/ios/start-integrating), same as the [Original Google Sign In](original). This is so that you can use the same API for both Android and iOS.

- On the Web, it covers both the [One-tap](https://developers.google.com/identity/gsi/web/guides/offerings#one_tap) flow and the [Google Sign-In button](https://developers.google.com/identity/gsi/web/guides/offerings#sign_in_with_google_button).

Expand Down
5 changes: 4 additions & 1 deletion docs/original.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ sidebar_position: 40

# Original Google sign in

This module exposes the [Google Sign-In for Android (legacy)](https://web.archive.org/web/20240308064911/https://developers.google.com/identity/sign-in/android/start-integrating) and [Google Sign-In for iOS](https://developers.google.com/identity/sign-in/ios/start) SDKs.
This module exposes

- [Google Sign-In for Android (legacy)](https://web.archive.org/web/20240308064911/https://developers.google.com/identity/sign-in/android/start-integrating)
- [Google Sign-In SDK](https://developers.google.com/identity/sign-in/ios/start) for iOS and macOS (react-native-macos support is only available to [sponsors](install#sponsor-only-version)).

```ts
import {
Expand Down
6 changes: 3 additions & 3 deletions docs/setting-up/expo.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ With Expo SDK 50, minimum iOS version was bumped to 13.4. If unsure, please cons

:::

:::warning
:::note

This package cannot be used in ["Expo Go"](https://docs.expo.dev/workflow/overview/#development-builds) because it requires custom native code.
This package cannot be used in ["Expo Go"](https://docs.expo.dev/workflow/overview/#expo-go-an-optional-tool-for-learning) because it requires custom native code.

However, you can add custom native code to Expo through a [development build](https://docs.expo.dev/workflow/overview/#development-builds). That is the approach documented in this guide.
However, you can add custom native code to Expo by using a [development build](https://docs.expo.dev/workflow/overview/#development-builds). That is the approach documented in this guide.

:::

Expand Down
31 changes: 16 additions & 15 deletions src/components/HomepageFeatures/index.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,50 @@
import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';
import clsx from "clsx";
import Heading from "@theme/Heading";
import styles from "./styles.module.css";

type FeatureItem = {
title: string;
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
Svg: React.ComponentType<React.ComponentProps<"svg">>;
description: JSX.Element;
};

const FeatureList: FeatureItem[] = [
{
title: 'Universal',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
title: "Universal",
Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
description: (
<>
Supports Android, iOS and Web. <br /> Also works with Expo (requires
custom dev client)!
Supports Android, iOS, Web and MacOS. <br /> Also works with Expo
(requires development client)!
</>
),
},
{
title: 'Actively maintained',
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
title: "Actively maintained",
Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
description: (
<>
Thanks to sponsors, the module receives updates regularly, and comes
with this detailed documentation site.
</>
),
},

{
title: 'Full-featured',
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
title: "Full-featured",
Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
description: (
<>
Supports the New Architecture (including bridgeless mode), and most of the features of the native
SDKs. Open an issue if something's missing!
Supports the New Architecture (including bridgeless mode), and most of
the features of the native SDKs. Open an issue if something's missing!
</>
),
},
];

function Feature({ title, description }: FeatureItem) {
return (
<div className={clsx('col col--4')}>
<div className={clsx("col col--4")}>
<div className="text--center">
{/*<Svg className={styles.featureSvg} role="img" />*/}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The Web example is [here](https://github.com/react-native-google-signin/google-signin-next/tree/main/web-example).

The React Native example is [here](https://github.com/react-native-google-signin/google-signin-next/tree/main/example).
The native example (iOS, Android, macOS) is [here](https://github.com/react-native-google-signin/google-signin-next/tree/main/example).

:::note
The above links are accessible only to sponsors. There is an old example [here](https://github.com/react-native-google-signin/google-signin/tree/master/example).
Expand Down