diff --git a/examples/with-oauth2-without-supertokens/.gitignore b/examples/with-oauth2-without-supertokens/.gitignore new file mode 100644 index 0000000..5873d9a --- /dev/null +++ b/examples/with-oauth2-without-supertokens/.gitignore @@ -0,0 +1,6 @@ + +# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb +# The following patterns were generated by expo-cli + +expo-env.d.ts +# @end expo-cli \ No newline at end of file diff --git a/examples/with-oauth2-without-supertokens/README.md b/examples/with-oauth2-without-supertokens/README.md new file mode 100644 index 0000000..063b079 --- /dev/null +++ b/examples/with-oauth2-without-supertokens/README.md @@ -0,0 +1,64 @@ +![SuperTokens banner](https://raw.githubusercontent.com/supertokens/supertokens-logo/master/images/Artboard%20%E2%80%93%2027%402x.png) + +# Example App using a Generic OAuth2 Library and SuperTokens as OAuth2 Provider + +This examples app demonstrates how to use SuperTokens as OAuth2 Provider in an Expo App using a generic OAuth2 library such as expo-auth-session. + +## Project setup + +Clone the repo, enter the directory, and use `npm` to install the project dependencies: + +```bash +git clone https://github.com/supertokens/supertokens-react-native +cd supertokens-react-native/examples/with-oauth2-without-supertokens +npm install +``` + +## 1. Get your Redirect URI + +You can get the `redirectUri` by logging the `redirectUri` variable in `app/index.tsx`. This usually looks like `exp://192.168.0.1:8081` where `192.168.0.1` is your local IP address. + + +## 2. Create an OAuth2 Client + +Update the `redirect_uris` value by the `redirectUri` you got in step 1. + +```bash +curl -X POST http://localhost:4445/admin/clients \ + -H "Content-Type: application/json" \ + -d '{ + "scope": "offline_access openid email", + "redirect_uris": ["exp://192.168.0.1:8081"], + "access_token_strategy": "jwt", + "token_endpoint_auth_method": "none", + "grant_types": ["authorization_code", "refresh_token"], + "response_types": ["code", "id_token"], + "skip_consent": true + }' +``` + +Note down the `client_id` from the response. + +## 3. Run the st-oauth2-authorization-server + +1. Open a new terminal window and navigate to `supertokens-react-native/examples/ +st-oauth2-authorization-server` +2. Read the README.md to setup `st-oauth2-authorization-server ` and run it using `npm start` + +## 4. Update app config + +Update `clientId` and `AUTH_SERVER_URL` values as per step 2 and 3 in `app/index.tsx`. + +## 5. Run the app. + +```bash +npm run start +``` + +## Author + +Created with :heart: by the folks at supertokens.com. + +## License + +This project is licensed under the Apache 2.0 license. diff --git a/examples/with-oauth2-without-supertokens/app.json b/examples/with-oauth2-without-supertokens/app.json new file mode 100644 index 0000000..2094ac6 --- /dev/null +++ b/examples/with-oauth2-without-supertokens/app.json @@ -0,0 +1,34 @@ +{ + "expo": { + "name": "with-oauth2-without-supertokens", + "slug": "with-oauth2-without-supertokens", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/images/icon.png", + "scheme": "myapp", + "userInterfaceStyle": "automatic", + "splash": { + "image": "./assets/images/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "ios": { + "supportsTablet": true + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/images/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "bundler": "metro", + "output": "static", + "favicon": "./assets/images/favicon.png" + }, + "plugins": ["expo-router"], + "experiments": { + "typedRoutes": true + } + } +} diff --git a/examples/with-oauth2-without-supertokens/app/+html.tsx b/examples/with-oauth2-without-supertokens/app/+html.tsx new file mode 100644 index 0000000..a27ccbb --- /dev/null +++ b/examples/with-oauth2-without-supertokens/app/+html.tsx @@ -0,0 +1,39 @@ +import { ScrollViewStyleReset } from "expo-router/html"; +import type { PropsWithChildren } from "react"; + +/** + * This file is web-only and used to configure the root HTML for every web page during static rendering. + * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs. + */ +export default function Root({ children }: PropsWithChildren) { + return ( + + + + + + + {/* + Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. + However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. + */} + + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} +