-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add with-oauth2-without-supertokens
- Loading branch information
Showing
34 changed files
with
19,181 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
|
||
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb | ||
# The following patterns were generated by expo-cli | ||
|
||
expo-env.d.ts | ||
# @end expo-cli |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<html lang="en"> | ||
<head> | ||
<meta charSet="utf-8" /> | ||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | ||
|
||
{/* | ||
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. | ||
*/} | ||
<ScrollViewStyleReset /> | ||
|
||
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} | ||
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} /> | ||
{/* Add any additional <head> elements that you want globally available on web... */} | ||
</head> | ||
<body>{children}</body> | ||
</html> | ||
); | ||
} | ||
|
||
const responsiveBackground = ` | ||
body { | ||
background-color: #fff; | ||
} | ||
@media (prefers-color-scheme: dark) { | ||
body { | ||
background-color: #000; | ||
} | ||
}`; |
32 changes: 32 additions & 0 deletions
32
examples/with-oauth2-without-supertokens/app/+not-found.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { Link, Stack } from "expo-router"; | ||
import { StyleSheet } from "react-native"; | ||
|
||
import { ThemedText } from "@/components/ThemedText"; | ||
import { ThemedView } from "@/components/ThemedView"; | ||
|
||
export default function NotFoundScreen() { | ||
return ( | ||
<> | ||
<Stack.Screen options={{ title: "Oops!" }} /> | ||
<ThemedView style={styles.container}> | ||
<ThemedText type="title">This screen doesn't exist.</ThemedText> | ||
<Link href="/" style={styles.link}> | ||
<ThemedText type="link">Go to home screen!</ThemedText> | ||
</Link> | ||
</ThemedView> | ||
</> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
alignItems: "center", | ||
justifyContent: "center", | ||
padding: 20, | ||
}, | ||
link: { | ||
marginTop: 15, | ||
paddingVertical: 15, | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native"; | ||
import { useFonts } from "expo-font"; | ||
import { Stack } from "expo-router"; | ||
import * as SplashScreen from "expo-splash-screen"; | ||
import { useEffect } from "react"; | ||
import "react-native-reanimated"; | ||
|
||
import { useColorScheme } from "@/hooks/useColorScheme"; | ||
|
||
// Prevent the splash screen from auto-hiding before asset loading is complete. | ||
SplashScreen.preventAutoHideAsync(); | ||
|
||
export default function RootLayout() { | ||
const colorScheme = useColorScheme(); | ||
const [loaded] = useFonts({ | ||
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"), | ||
}); | ||
|
||
useEffect(() => { | ||
if (loaded) { | ||
SplashScreen.hideAsync(); | ||
} | ||
}, [loaded]); | ||
|
||
if (!loaded) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}> | ||
<Stack> | ||
<Stack.Screen name="index" options={{ headerShown: false }} /> | ||
<Stack.Screen name="+not-found" /> | ||
</Stack> | ||
</ThemeProvider> | ||
); | ||
} |
Oops, something went wrong.