Skip to content

Commit

Permalink
feat: Add with-oauth2-without-supertokens
Browse files Browse the repository at this point in the history
  • Loading branch information
anku255 committed Aug 21, 2024
1 parent a07fd75 commit 052abb0
Show file tree
Hide file tree
Showing 34 changed files with 19,181 additions and 0 deletions.
6 changes: 6 additions & 0 deletions examples/with-oauth2-without-supertokens/.gitignore
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
64 changes: 64 additions & 0 deletions examples/with-oauth2-without-supertokens/README.md
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.
34 changes: 34 additions & 0 deletions examples/with-oauth2-without-supertokens/app.json
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
}
}
}
39 changes: 39 additions & 0 deletions examples/with-oauth2-without-supertokens/app/+html.tsx
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 examples/with-oauth2-without-supertokens/app/+not-found.tsx
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,
},
});
37 changes: 37 additions & 0 deletions examples/with-oauth2-without-supertokens/app/_layout.tsx
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>
);
}
Loading

0 comments on commit 052abb0

Please sign in to comment.