diff --git a/docs/src/components/InstallScripts.tsx b/docs/src/components/InstallScripts.tsx index 00e3f9987cc..4f5875e845d 100644 --- a/docs/src/components/InstallScripts.tsx +++ b/docs/src/components/InstallScripts.tsx @@ -60,13 +60,16 @@ export const TerminalCommand = ({ }; interface InstallScriptsProps { + command?: string; framework?: Framework; component?: string; } export const InstallScripts = ({ - framework, + // override framework default platform install command + command, component, + framework, }: InstallScriptsProps) => { const { query: { platform = 'react' }, @@ -86,6 +89,7 @@ export const InstallScripts = ({ @@ -93,6 +97,7 @@ export const InstallScripts = ({ diff --git a/docs/src/data/frameworks.ts b/docs/src/data/frameworks.ts index 98b03423432..2c39307a898 100644 --- a/docs/src/data/frameworks.ts +++ b/docs/src/data/frameworks.ts @@ -30,7 +30,7 @@ export const FRAMEWORK_DISPLAY_NAMES: Record = { // React Native requires direct installation of dependencies with native modules export const REACT_NATIVE_DEPENDENCIES = - 'react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill'; + '@aws-amplify/react-native react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill'; export const FRAMEWORK_INSTALL_SCRIPTS = { react: 'npm i @aws-amplify/ui-react aws-amplify', diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx index da1963dd2a1..b451ffc4d1b 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx @@ -78,7 +78,7 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an - + {({ platform }) => import(`./socialProviders.${platform}.mdx`)} diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react-native.mdx new file mode 100644 index 00000000000..7d0ea233555 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react-native.mdx @@ -0,0 +1,13 @@ +import { Alert } from '@aws-amplify/ui-react'; + +## Social Providers + + + +The Authenticator reads directly from your [Amplify configuration](/connected-components/authenticator#step-1-configure-backend) `socialProviders` from `amplify pull`. + + + +Social Provider authentication is supported out of the box, to configure: +- ensure the required dependencies have been installed in the [React Native Quick Start guide](../../connected-components/authenticator#step-2-install-dependencies) +- configure your provider(s) by following the Amplify JS [Add Social Provider Sign-In guide](https://docs.amplify.aws/react-native/build-a-backend/auth/add-social-provider/) diff --git a/docs/src/pages/[platform]/connected-components/authenticator/quick-start-install.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/quick-start-install.react-native.mdx index 82217738426..ec187c57a49 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/quick-start-install.react-native.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/quick-start-install.react-native.mdx @@ -1,3 +1,37 @@ +import { Example, ExampleCode } from '@/components/Example'; import { InstallScripts } from '@/components/InstallScripts'; + +If your project will support Federated Sign In using the React Native `Authenticator` the `@aws-amplify/rtn-web-browser` package is also required: + + + +`@aws-amplify/react-native` and `@aws-amplify/rtn-web-browser` require a minimum iOS deployment target of `13.0`, open the _Podfile_ located in the _ios_ directory and update the `target` value: + +```diff +- platform :ios, min_ios_version_supported ++ platform :ios, 13.0 +``` + +Then install the iOS cocoapods, by running: + + + +The AWS SDK requires React Native applications to polyfill `crypto.getRandomValues` and `URL`. Import the [`react-native-get-random-values`](https://github.com/LinusU/react-native-get-random-values) and [`react-native-url-polyfill`](https://github.com/charpeni/react-native-url-polyfill) polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level `index.js`). + + + +```jsx +// index.js +import 'react-native-url-polyfill/auto'; +import 'react-native-get-random-values'; + +import { AppRegistry } from 'react-native'; +import App from './App'; +import { name as appName } from './app.json'; + +AppRegistry.registerComponent(appName, () => App); +``` + + diff --git a/docs/src/pages/[platform]/getting-started/installation/dependencies.react-native.mdx b/docs/src/pages/[platform]/getting-started/installation/dependencies.react-native.mdx index 9a2752409d5..7121b231221 100644 --- a/docs/src/pages/[platform]/getting-started/installation/dependencies.react-native.mdx +++ b/docs/src/pages/[platform]/getting-started/installation/dependencies.react-native.mdx @@ -1,5 +1,5 @@ import { Tabs } from '@aws-amplify/ui-react'; -import { InstallScripts } from '@/components/InstallScripts.tsx'; +import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx'; import { Example, ExampleCode } from '@/components/Example'; `@aws-amplify/ui-react-native` is compatible for usage with the React Native apps created using the [React Native CLI](https://github.com/react-native-community/cli) or [Expo](https://expo.dev/). @@ -15,12 +15,22 @@ Install `@aws-amplify/ui-react-native` and its dependencies with [npm](https://w -For iOS, additionally run: -``` -npx pod-install +If your project will support Federated Sign In using the React Native `Authenticator` the `@aws-amplify/rtn-web-browser` package is also required: + + + +`@aws-amplify/react-native` and `@aws-amplify/rtn-web-browser` require a minimum iOS deployment target of `13.0`, open the _Podfile_ located in the _ios_ directory and update the `target` value: + +```diff +- platform :ios, min_ios_version_supported ++ platform :ios, 13.0 ``` -> The AWS SDK requires React Native applications to polyfill `crypto.getRandomValues` and `URL`. Import the [`react-native-get-random-values`](https://github.com/LinusU/react-native-get-random-values) and [`react-native-url-polyfill`](https://github.com/charpeni/react-native-url-polyfill) polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level `index.js`). +Then install the iOS cocoapods, by running: + + + +The AWS SDK requires React Native applications to polyfill `crypto.getRandomValues` and `URL`. Import the [`react-native-get-random-values`](https://github.com/LinusU/react-native-get-random-values) and [`react-native-url-polyfill`](https://github.com/charpeni/react-native-url-polyfill) polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level `index.js`). @@ -43,17 +53,14 @@ AppRegistry.registerComponent(appName, () => App); Add `@aws-amplify/ui-react-native` and its dependencies using the [Expo CLI](https://expo.dev/tools#cli) to ensure installation of native module dependency versions compatible with your Expo app: - - -```shell -expo install @aws-amplify/ui-react-native aws-amplify react-native-safe-area-context @react-native-async-storage/async-storage @react-native-community/netinfo -``` - - - - - - +
+ +
+If your project will support Federated Sign In using the React Native `Authenticator` the `@aws-amplify/rtn-web-browser` package is also required: +
+ + +