From b8ea3b2ff2705322bfa278b513369d7f8bca9e68 Mon Sep 17 00:00:00 2001 From: Raymond Lim Date: Tue, 18 Jan 2022 23:58:58 +1100 Subject: [PATCH] generic login flow implemeneted --- android/app/build.gradle | 1 + ios/chefnotebook/AppDelegate.m | 7 ++ ios/chefnotebook/Info.plist | 13 ++++ package-lock.json | 137 +++++++++++++++++++++++++++++++++ package.json | 3 + src/screens/Home.tsx | 10 ++- src/screens/Login.tsx | 45 ++++++++++- 7 files changed, 212 insertions(+), 4 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index ae32917..8bee792 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -136,6 +136,7 @@ android { targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" + manifestPlaceholders = [auth0Domain: "dev-4ir78alb.us.auth0.com", auth0Scheme: "${applicationId}"] } splits { abi { diff --git a/ios/chefnotebook/AppDelegate.m b/ios/chefnotebook/AppDelegate.m index 8a46353..ccafdd2 100644 --- a/ios/chefnotebook/AppDelegate.m +++ b/ios/chefnotebook/AppDelegate.m @@ -11,6 +11,7 @@ #import #import #import +#import static void InitializeFlipper(UIApplication *application) { FlipperClient *client = [FlipperClient sharedClient]; @@ -25,6 +26,12 @@ static void InitializeFlipper(UIApplication *application) { @implementation AppDelegate +- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url + options:(NSDictionary *)options +{ + return [RCTLinkingManager application:app openURL:url options:options]; +} + - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { #ifdef FB_SONARKIT_ENABLED diff --git a/ios/chefnotebook/Info.plist b/ios/chefnotebook/Info.plist index 0c8b832..4898a37 100644 --- a/ios/chefnotebook/Info.plist +++ b/ios/chefnotebook/Info.plist @@ -20,6 +20,19 @@ 1.0 CFBundleSignature ???? + CFBundleURLTypes + + + CFBundleTypeRole + None + CFBundleURLName + auth0 + CFBundleURLSchemes + + $(PRODUCT_BUNDLE_IDENTIFIER) + + + CFBundleVersion 1 LSRequiresIPhoneOS diff --git a/package-lock.json b/package-lock.json index da68f55..a6dcc92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,10 +12,12 @@ "@react-navigation/bottom-tabs": "^5.11.15", "@react-navigation/native": "^5.9.8", "@react-navigation/stack": "^5.14.9", + "@types/auth0-js": "^9.14.5", "lodash": "^4.17.21", "react": "17.0.2", "react-hook-form": "^7.22.5", "react-native": "0.66.4", + "react-native-auth0": "^2.12.0", "react-native-gesture-handler": "^2.1.0", "react-native-reanimated": "^2.2.4", "react-native-safe-area-context": "^3.3.2", @@ -30,6 +32,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@types/jest": "^26.0.23", "@types/react-native": "^0.66.4", + "@types/react-native-auth0": "^2.10.0", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^5.7.0", "@typescript-eslint/parser": "^5.7.0", @@ -4017,6 +4020,11 @@ "node": ">= 6" } }, + "node_modules/@types/auth0-js": { + "version": "9.14.5", + "resolved": "https://registry.npmjs.org/@types/auth0-js/-/auth0-js-9.14.5.tgz", + "integrity": "sha512-ZIHdtQ6Fkn7C+qAECtiP/+igb/vd0b+lOw018c+xEW2QDQFLSnDjtQAPLkdZopOsVdiXdC4JMS5w8ZHQfRGHtw==" + }, "node_modules/@types/babel__core": { "version": "7.1.17", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.17.tgz", @@ -4157,6 +4165,12 @@ "@types/react": "*" } }, + "node_modules/@types/react-native-auth0": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@types/react-native-auth0/-/react-native-auth0-2.10.0.tgz", + "integrity": "sha512-yIuknvsBJ9ovjVnPvjJr//mLbmFg0JVfV1g60moDd0Hh6m+fY0g6bi/ZW9XImyj9WdJ7AnZ+GWMvmC4uYLnSUw==", + "dev": true + }, "node_modules/@types/react-test-renderer": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz", @@ -5150,6 +5164,11 @@ "node": ">=0.10.0" } }, + "node_modules/base-64": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", + "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + }, "node_modules/base/node_modules/define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", @@ -5833,6 +5852,11 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz", + "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==" + }, "node_modules/cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -9878,6 +9902,11 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsbn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz", + "integrity": "sha1-sBMHyym2GKHtJux56RH4A8TaAEA=" + }, "node_modules/jsc-android": { "version": "250230.2.1", "resolved": "https://registry.npmjs.org/jsc-android/-/jsc-android-250230.2.1.tgz", @@ -10181,6 +10210,11 @@ "node": ">=4.0" } }, + "node_modules/jwt-decode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", + "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=" + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -11836,6 +11870,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/querystring": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", + "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.", + "engines": { + "node": ">=0.4.x" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -11963,6 +12006,22 @@ "react": "17.0.2" } }, + "node_modules/react-native-auth0": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/react-native-auth0/-/react-native-auth0-2.12.0.tgz", + "integrity": "sha512-O9tZCZN59AbhiTXfBzx82/pOwdgeI5MIyoI0riJGoq0CP7tmptZEnc5d48tKMFpsGrCtnM8GjMbhp8yBjTqOOg==", + "dependencies": { + "base-64": "^0.1.0", + "crypto-js": "^3.3.0", + "jsbn": "^1.1.0", + "jwt-decode": "^2.2.0", + "url": "^0.11.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17", + "react-native": ">=0.65.0 <1.0.x" + } + }, "node_modules/react-native-codegen": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.0.7.tgz", @@ -14228,6 +14287,20 @@ "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", "deprecated": "Please see https://github.com/lydell/urix#deprecated" }, + "node_modules/url": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", + "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "dependencies": { + "punycode": "1.3.2", + "querystring": "0.2.0" + } + }, + "node_modules/url/node_modules/punycode": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + }, "node_modules/use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", @@ -17477,6 +17550,11 @@ "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "dev": true }, + "@types/auth0-js": { + "version": "9.14.5", + "resolved": "https://registry.npmjs.org/@types/auth0-js/-/auth0-js-9.14.5.tgz", + "integrity": "sha512-ZIHdtQ6Fkn7C+qAECtiP/+igb/vd0b+lOw018c+xEW2QDQFLSnDjtQAPLkdZopOsVdiXdC4JMS5w8ZHQfRGHtw==" + }, "@types/babel__core": { "version": "7.1.17", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.17.tgz", @@ -17617,6 +17695,12 @@ "@types/react": "*" } }, + "@types/react-native-auth0": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@types/react-native-auth0/-/react-native-auth0-2.10.0.tgz", + "integrity": "sha512-yIuknvsBJ9ovjVnPvjJr//mLbmFg0JVfV1g60moDd0Hh6m+fY0g6bi/ZW9XImyj9WdJ7AnZ+GWMvmC4uYLnSUw==", + "dev": true + }, "@types/react-test-renderer": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz", @@ -18340,6 +18424,11 @@ } } }, + "base-64": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", + "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + }, "base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -18874,6 +18963,11 @@ "which": "^2.0.1" } }, + "crypto-js": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz", + "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==" + }, "cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -21913,6 +22007,11 @@ "esprima": "^4.0.0" } }, + "jsbn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz", + "integrity": "sha1-sBMHyym2GKHtJux56RH4A8TaAEA=" + }, "jsc-android": { "version": "250230.2.1", "resolved": "https://registry.npmjs.org/jsc-android/-/jsc-android-250230.2.1.tgz", @@ -22158,6 +22257,11 @@ "object.assign": "^4.1.2" } }, + "jwt-decode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", + "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=" + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -23479,6 +23583,11 @@ "strict-uri-encode": "^2.0.0" } }, + "querystring": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -23573,6 +23682,18 @@ } } }, + "react-native-auth0": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/react-native-auth0/-/react-native-auth0-2.12.0.tgz", + "integrity": "sha512-O9tZCZN59AbhiTXfBzx82/pOwdgeI5MIyoI0riJGoq0CP7tmptZEnc5d48tKMFpsGrCtnM8GjMbhp8yBjTqOOg==", + "requires": { + "base-64": "^0.1.0", + "crypto-js": "^3.3.0", + "jsbn": "^1.1.0", + "jwt-decode": "^2.2.0", + "url": "^0.11.0" + } + }, "react-native-codegen": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.0.7.tgz", @@ -25338,6 +25459,22 @@ "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" }, + "url": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", + "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "requires": { + "punycode": "1.3.2", + "querystring": "0.2.0" + }, + "dependencies": { + "punycode": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + } + } + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index e10477e..fd61b7e 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,12 @@ "@react-navigation/bottom-tabs": "^5.11.15", "@react-navigation/native": "^5.9.8", "@react-navigation/stack": "^5.14.9", + "@types/auth0-js": "^9.14.5", "lodash": "^4.17.21", "react": "17.0.2", "react-hook-form": "^7.22.5", "react-native": "0.66.4", + "react-native-auth0": "^2.12.0", "react-native-gesture-handler": "^2.1.0", "react-native-reanimated": "^2.2.4", "react-native-safe-area-context": "^3.3.2", @@ -32,6 +34,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@types/jest": "^26.0.23", "@types/react-native": "^0.66.4", + "@types/react-native-auth0": "^2.10.0", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^5.7.0", "@typescript-eslint/parser": "^5.7.0", diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx index b336f00..ae4e09a 100644 --- a/src/screens/Home.tsx +++ b/src/screens/Home.tsx @@ -72,7 +72,15 @@ const Home: FC = () => { navigation.addListener('beforeRemove', (e)=> { e.preventDefault() if(isFocused) { - BackHandler.exitApp() + Alert.alert( + 'Exit App', + 'Do you want to exit?', + [ + {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'Yes', onPress: () => BackHandler.exitApp()}, + ], + { cancelable: false }); + return true; } }) }, [navigation]) diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx index 42e0e48..6d41d04 100644 --- a/src/screens/Login.tsx +++ b/src/screens/Login.tsx @@ -1,8 +1,9 @@ -import React, {useState} from 'react' +import React, {useState, useEffect} from 'react' import { Text, View, Image, + Alert, } from 'react-native' import logo from '../assets/chef.png'; import MainContainer from '../components/containers/MainContainer' @@ -11,6 +12,13 @@ import OvalButton from '../components/buttons/roundedButton/OvalButton' import { SharedElement } from 'react-navigation-shared-element'; import { useNavigation } from '@react-navigation/native'; import { Controller, useForm } from 'react-hook-form'; +import Auth0 from 'react-native-auth0'; + +const cred = { + domain: 'dev-4ir78alb.us.auth0.com', + clientId: 'Sm7E1Z1HHrYedK1IZN98g6GZeFchYFK4' +} +const auth0 = new Auth0(cred); interface props { @@ -29,12 +37,43 @@ const Login: React.FC = ({}) => { userName: '', password: '', } - }) + }) + let [accessToken, setAccessToken] = useState(null); + + const onLogin = () => { + auth0.webAuth + .authorize({ + scope: 'openid profile email' + }) + .then(credentials => { + // Alert.alert('AccessToken: ' + credentials.accessToken); + setAccessToken(credentials.accessToken); + }) + .catch(error => console.log(error)); + }; + + const onLogout = () => { + auth0.webAuth + .clearSession({ + federated: false, + customScheme: undefined + }) + .then(success => { + Alert.alert('Logged out!'); + setAccessToken(null); + }) + .catch(error => { + console.log('Log out cancelled'); + }); + }; const onSubmit = () => { navigation.navigate('Introduction') } + useEffect(() => { + if(accessToken !== null) return navigation.navigate('DashBoard') + }, [accessToken]) return ( = ({}) => { name='password' /> Confirm