├── .gitignore
├── App.tsx
├── Auth
    ├── index.tsx
    ├── utils-async-storage.tsx
    ├── utils-expo.tsx
    └── utils.tsx
├── README.md
├── app.json
├── assets
    ├── favicon.png
    ├── icon.png
    ├── snack-icon.png
    └── splash.png
├── babel.config.js
├── package.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | 
12 | # macOS
13 | .DS_Store
14 | 


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Text, View, StyleSheet, Button } from 'react-native';
 3 | import { AuthProvider, useAuth } from './Auth';
 4 | 
 5 | 
 6 | const LogOutButton = () => {
 7 |   const { signOut } = useAuth();
 8 |   return <Button title="Log Out" onPress={signOut} />;
 9 | };
10 | 
11 | const LogInButton = () => {
12 |   const { signIn } = useAuth();
13 |   return <Button title="Log IN" onPress={() => signIn('my_token')} />;
14 | };
15 | const Main = () => {
16 |   const { status, userToken } = useAuth();
17 | 
18 |   return (
19 |     <View style={styles.container}>
20 |       <Text style={styles.text}>status : {status}</Text>
21 |       <Text style={styles.text}>
22 |         userToken : {userToken ? userToken : 'null'}
23 |       </Text>
24 |       <View style={styles.actions}>
25 |         <LogInButton />
26 |         <LogOutButton />
27 |       </View>
28 |     </View>
29 |   );
30 | };
31 | 
32 | export default function App() {
33 |   return (
34 |     <AuthProvider>
35 |       <Main />
36 |     </AuthProvider>
37 |   );
38 | }
39 | 
40 | const styles = StyleSheet.create({
41 |   container: {
42 |     flex: 1,
43 |     justifyContent: 'center',
44 |     backgroundColor: '#ecf0f1',
45 |     padding: 8,
46 |   },
47 |   button: {
48 |     margin: 24,
49 |   },
50 |   actions: {
51 |     flexDirection: 'row',
52 |     justifyContent: 'space-around',
53 |     paddingVertical: 20,
54 |   },
55 |   text: {
56 |     textAlign: 'center',
57 |   },
58 | });
59 | 


--------------------------------------------------------------------------------
/Auth/index.tsx:
--------------------------------------------------------------------------------
  1 | /// Auth.tsx
  2 | import * as React from 'react';
  3 | //import { getToken, setToken, removeToken } from './utils-expo.tsx';
  4 | import { getToken, setToken, removeToken } from './utils-async-storage.tsx';
  5 | 
  6 | interface AuthState {
  7 |   userToken: string | undefined | null;
  8 |   status: 'idle' | 'signOut' | 'signIn';
  9 | }
 10 | type AuthAction = { type: 'SIGN_IN'; token: string } | { type: 'SIGN_OUT' };
 11 | 
 12 | type AuthPayload = string;
 13 | 
 14 | interface AuthContextActions {
 15 |   signIn: (data: AuthPayload) => void;
 16 |   signOut: () => void;
 17 | }
 18 | 
 19 | interface AuthContextType extends AuthState, AuthContextActions {}
 20 | const AuthContext = React.createContext<AuthContextType>({
 21 |   status: 'idle',
 22 |   userToken: null,
 23 |   signIn: () => {},
 24 |   signOut: () => {},
 25 | });
 26 | 
 27 | // In case you want to use Auth functions outside React tree
 28 | export const AuthRef = React.createRef<AuthContextActions>();
 29 | 
 30 | export const useAuth = (): AuthContextType => {
 31 |   const context = React.useContext(AuthContext);
 32 |   if (!context) {
 33 |     throw new Error('useAuth must be inside an AuthProvider with a value');
 34 |   }
 35 |   return context;
 36 | };
 37 | 
 38 | export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 39 |   const [state, dispatch] = React.useReducer(AuthReducer, {
 40 |     status: 'idle',
 41 |     userToken: null,
 42 |   });
 43 | 
 44 |   React.useEffect(() => {
 45 |     const initState = async () => {
 46 |       try {
 47 |         const userToken = await getToken();
 48 |         if (userToken !== null) {
 49 |           dispatch({ type: 'SIGN_IN', token: userToken });
 50 |         } else {
 51 |           dispatch({ type: 'SIGN_OUT' });
 52 |         }
 53 |       } catch (e) {
 54 |         // catch error here
 55 |         // Maybe sign_out user!
 56 |       }
 57 |     };
 58 | 
 59 |     initState();
 60 |   }, []);
 61 | 
 62 |   React.useImperativeHandle(AuthRef, () => authActions);
 63 | 
 64 |   const authActions: AuthContextActions = React.useMemo(
 65 |     () => ({
 66 |       signIn: async (token: string) => {
 67 |         dispatch({ type: 'SIGN_IN', token });
 68 |         await setToken(token);
 69 |       },
 70 |       signOut: async () => {
 71 |         await removeToken(); // TODO: use Vars
 72 |         dispatch({ type: 'SIGN_OUT' });
 73 |       },
 74 |     }),
 75 |     []
 76 |   );
 77 | 
 78 |   return (
 79 |     <AuthContext.Provider value={{ ...state, ...authActions }}>
 80 |       {children}
 81 |     </AuthContext.Provider>
 82 |   );
 83 | };
 84 | 
 85 | const AuthReducer = (prevState: AuthState, action: AuthAction): AuthState => {
 86 |   switch (action.type) {
 87 |     case 'SIGN_IN':
 88 |       return {
 89 |         ...prevState,
 90 |         status: 'signIn',
 91 |         userToken: action.token,
 92 |       };
 93 |     case 'SIGN_OUT':
 94 |       return {
 95 |         ...prevState,
 96 |         status: 'signOut',
 97 |         userToken: null,
 98 |       };
 99 |   }
100 | };
101 | 


--------------------------------------------------------------------------------
/Auth/utils-async-storage.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import AsyncStorage from '@react-native-community/async-storage';
 4 | 
 5 | 
 6 | export async function getItem<T>(key: string): Promise<T | null> {
 7 |   const value = await AsyncStorage.getItem(key);
 8 |   return value ? JSON.parse(value) : null;
 9 | }
10 | 
11 | export async function setItem<T>(key: string, value: T): Promise<void> {
12 |   return AsyncStorage.setItem(key, JSON.stringify(value));
13 | }
14 | export async function removeItem(key: string): Promise<void> {
15 |   return AsyncStorage.removeItem(key);
16 | }
17 | 
18 | const TOKEN = "token";
19 | 
20 | export const getToken = () => getItem<string>(TOKEN)
21 | export const removeToken = () => removeItem(TOKEN)
22 | export const setToken  = (value : string ) => setItem<string>(TOKEN,value)


--------------------------------------------------------------------------------
/Auth/utils-expo.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import * as SecureStore from 'expo-secure-store';
 3 | 
 4 | const TOKEN = 'token'
 5 | 
 6 | export async function getItem(key: string): Promise<string | null> {
 7 |   const value = await SecureStore.getItemAsync(key)
 8 |   return value ? value : null
 9 | }
10 | 
11 | export async function setItem(key: string, value: string): Promise<void> {
12 |   return SecureStore.setItemAsync(key, value)
13 | }
14 | export async function removeItem(key: string): Promise<void> {
15 |   return SecureStore.deleteItemAsync(key)
16 | }
17 | 
18 | export const getToken = () => getItem(TOKEN)
19 | export const removeToken = () => removeItem(TOKEN)
20 | export const setToken = (value: string) => setItem(TOKEN, value)


--------------------------------------------------------------------------------
/Auth/utils.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import SInfo from 'react-native-sensitive-info';
 4 | 
 5 | const TOKEN = 'token';
 6 | const SHARED_PERFS = 'ObytesSharedPerfs';
 7 | const KEYCHAIN_SERVICE = 'ObytesKeychain';
 8 | const keyChainOptions = {
 9 |   sharedPreferencesName: SHARED_PERFS,
10 |   keychainService: KEYCHAIN_SERVICE,
11 | };
12 | 
13 | export async function getItem<T>(key: string): Promise<T | null> {
14 |   const value = await SInfo.getItem(key, keyChainOptions);
15 |   return value ? JSON.parse(value)?.[key] || null : null;
16 | }
17 | 
18 | export async function setItem<T>(key: string, value: T): Promise<void> {
19 |   SInfo.setItem(key, JSON.stringify({[key]: value}), keyChainOptions);
20 | }
21 | export async function removeItem(key: string): Promise<void> {
22 |   SInfo.deleteItem(key, keyChainOptions);
23 | }
24 | 
25 | export const getToken = () => getItem<string>(TOKEN);
26 | export const removeToken = () => removeItem(TOKEN);
27 | export const setToken = (value: string) => setItem<string>(TOKEN, value);
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Native Auth 
2 | 
3 | - Full Post : [Authentication in React Native, Easy, Secure, and Reusable solution](https://obytes.com/blog/authentication-in-react-native-easy-secure-and-reusable-solution)
4 | - Expo Demo : [Demo](https://snack.expo.io/@yjose/react-native-auth)
5 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "react-native-auth",
 4 |     "slug": "snack-ce77bf1d-f6aa-44e7-beb8-89fc4504e815",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "web": {
23 |       "favicon": "./assets/favicon.png"
24 |     }
25 |   }
26 | }


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/obytes/react-native-auth/1f534f35a1816ddbc57238e1cb45168c0551e4f7/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/obytes/react-native-auth/1f534f35a1816ddbc57238e1cb45168c0551e4f7/assets/icon.png


--------------------------------------------------------------------------------
/assets/snack-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/obytes/react-native-auth/1f534f35a1816ddbc57238e1cb45168c0551e4f7/assets/snack-icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/obytes/react-native-auth/1f534f35a1816ddbc57238e1cb45168c0551e4f7/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "expo": "~38.0.8",
12 |     "expo-status-bar": "^1.0.2",
13 |     "react": "~16.11.0",
14 |     "react-dom": "~16.11.0",
15 |     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
16 |     "react-native-web": "~0.11.7",
17 |     "react-native-paper": "3.6.0",
18 |     "expo-secure-store": "9.1.0",
19 |     "@react-native-community/async-storage": "1.11.0"
20 |   },
21 |   "devDependencies": {
22 |     "@babel/core": "^7.8.6",
23 |     "@types/react": "~16.9.41",
24 |     "@types/react-native": "~0.62.13",
25 |     "typescript": "~3.9.5"
26 |   },
27 |   "private": true
28 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "jsx": "react-native",
 5 |     "lib": ["dom", "esnext"],
 6 |     "moduleResolution": "node",
 7 |     "noEmit": true,
 8 |     "skipLibCheck": true,
 9 |     "resolveJsonModule": true,
10 |     "strict": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------