diff --git a/src/components/TokenUtils.astro b/src/components/TokenUtils.astro new file mode 100644 index 000000000..f99b2b3fa --- /dev/null +++ b/src/components/TokenUtils.astro @@ -0,0 +1,30 @@ + diff --git a/src/content/docs/developer-tools/about/our-sdks.mdx b/src/content/docs/developer-tools/about/our-sdks.mdx index 18a1343bf..ca30c236a 100644 --- a/src/content/docs/developer-tools/about/our-sdks.mdx +++ b/src/content/docs/developer-tools/about/our-sdks.mdx @@ -48,7 +48,7 @@ Make sure that your tech stack’s versions are compatible with the SDK you want - [Android SDK](/developer-tools/sdks/native/android-sdk/) - [iOS SDK](/developer-tools/sdks/native/ios-sdk/) - [React Native SDK](/developer-tools/sdks/native/react-native-sdk/) -- [Expo and React Native SDK](/developer-tools/sdks/native/expo-react-native/) +- [Expo and React Native SDK](/developer-tools/sdks/native/expo/) - [Flutter SDK ](/developer-tools/sdks/native/flutter-sdk/) ## **Other** diff --git a/src/content/docs/developer-tools/sdks/native/expo-react-native.mdx b/src/content/docs/developer-tools/sdks/native/expo-react-native.mdx deleted file mode 100644 index 70b2aae92..000000000 --- a/src/content/docs/developer-tools/sdks/native/expo-react-native.mdx +++ /dev/null @@ -1,1048 +0,0 @@ ---- -page_id: 3e372a8b-9168-4d50-a5e7-13941cfbd632 -title: Expo and React Native SDK -sidebar: - order: 20 -relatedArticles: - - f626b8e4-79c2-4d17-8148-b298c115a552 -head: - - tag: meta - attrs: - property: "og:image" - content: "https://kinde.com/assets/images/open-graph/DOCS-SSI-SDK_react-native.png" ---- - -The Kinde React Native SDK allows developers to quickly and securely integrate a new or an existing React Native application into the Kinde platform. This SDK is for people using Expo. - -## Supported versions - -We support Expo with React Native versions 0.70 and higher. - -Use this document for Expo and React Native. - -To use just React Native, see [React Native SDK](/developer-tools/sdks/native/react-native-sdk/). You can also view the [React Native docs](https://github.com/kinde-oss/kinde-react-native-sdk-0-7x) and [React Native starter kit](https://github.com/kinde-oss/kinde-react-native-sdk-0-7x) in GitHub. - -We are working on creating an updated Expo package (it is being tested) and we will add a link here when it's ready. - -## Register for Kinde - -If you haven’t already got a Kinde account, [register for free here](https://app.kinde.com/register) (no credit card required). Registering gives you a Kinde domain, which you need to get started, e.g. `yourapp.kinde.com`. - -## Before you install - -You will need Node, the React Native command line interface, a JDK, Android Studio (for Android) and Xcode (for iOS). - -Follow [the installation instructions for your chosen OS](https://reactnative.dev/docs/environment-setup) to install dependencies. - -## **Installation with Expo Managed Workflow** - - - -## **Installation with Bare React Native** - -### **Android** - -1. The SDK can be installed using your package manager or `expo` cli - - - - ```shell title="With Expo CLI" - expo install @kinde-oss/react-native-sdk-0-7x - ``` - - ```shell title="With Expo CLI (npx)" - npx expo install @kinde-oss/react-native-sdk-0-7x - ``` - -2. Configure the deep link support for your app - - ```shell - npx uri-scheme add - - # npx uri-scheme add myapp - - ``` - -3. Edit `android/settings.gradle` - - ```java - ... - - include ':react-native-keychain' - project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android') - - include ':react-native-inappbrowser-reborn' - project(':react-native-inappbrowser-reborn').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-inappbrowser-reborn/android') - ... - - ``` - -4. Edit `android/app/build.gradle` - - ```java - apply plugin: 'com.android.application' - - android { - ... - } - - dependencies { - ... - - implementation project(':react-native-keychain') - implementation project(':react-native-inappbrowser-reborn') - - ... - } - - ``` - -5. Edit `MainApplication.java` - - ```java - ... - import com.oblador.keychain.KeychainPackage; - import com.proyecto26.inappbrowser.RNInAppBrowserPackage; - ... - - public class MainApplication extends Application implements ReactApplication { - private final ReactNativeHost mReactNativeHost = - new ReactNativeHost(this) { - ... - @Override - protected List getPackages() { - ... - List packages = new PackageList(this).getPackages(); - packages.add(new KeychainPackage()); - packages.add(new RNInAppBrowserPackage()); - ... - return packages; - } - ... - }; - - ... - } - ... - - ``` - - In React Native version 0.73 or above, the `MainApplication.java` file has been replaced with `MainApplication.kt` - - ```kotlin - import com.oblador.keychain.KeychainPackage; - import com.proyecto26.inappbrowser.RNInAppBrowserPackage; - ... - - class MainApplication : Application(), ReactApplication { - override val reactNativeHost: ReactNativeHost = - object : DefaultReactNativeHost(this) { - override fun getPackages(): List = - PackageList(this).packages.apply { - // Packages that cannot be autolinked yet can be added manually here, for example: - // add(MyReactNativePackage()) - add(KeychainPackage()); - add(RNInAppBrowserPackage()); - } - - ... - } - - ... - } - ``` - -6. Execute the command `yarn run android` or `npx expo run:android` - -### **iOS** - -1. Install the **CocoaPods**. We recommend installing **CocoaPods** using [Homebrew](https://brew.sh/). - - ```shell - # Install CocoaPods via brew - brew install cocoapods - - ``` - -2. Install the SDK - - ```shell - expo install @kinde-oss/react-native-sdk-0-7x expo-secure-store expo-web-browser expo-constants - // or - npx expo install @kinde-oss/react-native-sdk-0-7x expo-secure-store expo-web-browser expo-constants - - ``` - -3. Add the following to your `Podfile` and run pod update: - - ```swift - pod 'RNKeychain', :path => '../node_modules/react-native-keychain' - pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn' - - ``` - - ```shell - cd ios && pod update - - ``` - -4. Execute the command `yarn run ios` or `npx expo run:ios` - -If you encounter any errors during the SDK installation process, you can refer to the **General tips** section at the bottom of this document, for troubleshooting guidance. - -## K**inde configuration** - -1. In Kinde, go to **Settings > Applications.** -2. Select **View details** on the **Frontend app**. -3. Scroll down to the **Callback URLs** section. -4. Add in the callback URLs for your React Native app, which should look something like this: - - Allowed callback URLs - `/kinde_callback` - - Allowed logout redirect URLs - `/kinde_callback` - -Make sure you press the Save button at the bottom of the page! - -Note: The `/kinde_callback/kinde_callback` is used as an example of local URL Scheme, change to the local URL Scheme or production URL Scheme that you use. - -## Environments - -If you would like to use our Environments feature as part of your development process. You will need to create them first within your Kinde account. In this case you would use the Environment subdomain in the code block above. - -## Configure your app - -### **Environment variables** - -Put these variables in your .env file. You can find these variables on the same page as where you set the callback URLs. - -- `KINDE_ISSUER_URL` - your Kinde domain -- `KINDE_POST_CALLBACK_URL` - After the user authenticates we will callback to this address. Make sure this URL is under your allowed callback URLs -- `KINDE_POST_LOGOUT_REDIRECT_URL` - where you want users to be redirected to after logging out. Make sure this URL is under your allowed logout redirect URLs -- `KINDE_CLIENT_ID` - you can find this on the App Keys page - -```jsx -KINDE_ISSUER_URL=https://.kinde.com -KINDE_POST_CALLBACK_URL=/kinde_callback -KINDE_POST_LOGOUT_REDIRECT_URL=/kinde_callback -KINDE_CLIENT_ID= - -``` - -Note: The `myapp://localhost:3000/kinde_callback` is used as an example of local URL Scheme, change to the local URL Scheme or production URL Scheme that you use. - -## Configuration deep link - -### **Linking to your app** - -To link to your [development](https://docs.expo.dev/development/introduction/) build or standalone app, you need to specify a custom URL scheme for your app. You can register a scheme in your Expo config (**app.json**, **app.config.js**) by adding a string under the `scheme` key: - -```json -{ - "expo": { - "scheme": "myapp", - ... - } -} - -``` - -### **Linking to Expo Go** - -[Expo Go](https://expo.dev/expo-go) uses the `exp://` scheme, however, if we link to `exp://` without any address afterward, it will open the app to the home screen. - -In development, your app will live at a url like `exp://127.0.0.1:19000`. When published, an experience will be hosted at a URL like  `exp://u.expo.dev/[project-id]?channel-name=channel-name]&runtime-version=[runtime-version]`, where `u.expo.dev/[project-id]` is the hosted URL that Expo Go fetches from. - -**Caution**: You also should update your callback URL to both your app and Kinde. - -```jsx -KINDE_ISSUER_URL=https://your_kinde_domain.kinde.com -KINDE_POST_CALLBACK_URL=exp://your_machine_ip:your_machine_port // f.e: exp://127.0.0.1:19000 -KINDE_CLIENT_ID=your_kinde_client_id -KINDE_POST_LOGOUT_REDIRECT_URL=exp://your_machine_ip:your_machine_port // f.e: exp://127.0.0.1:19000 - -``` - -## Integrate with your app - -To create a new instance of the KindeSDK object, execute the code below. - -```jsx -... -import { KindeSDK } from '@kinde-oss/react-native-sdk-0-7x'; -... - -... -const client = new KindeSDK(YOUR_KINDE_ISSUER, YOUR_KINDE_REDIRECT_URI, YOUR_KINDE_CLIENT_ID, YOUR_KINDE_LOGOUT_REDIRECT_URI); -... - -``` - -## Sign in and registration - -Kinde provides methods for easily implementing a login / register flow. - -As an example if you add buttons as follows. - -```jsx - - -