@os-team/auth-mobile

The authentication module for os-team's mobile apps.

Installation

Install the package using the following command:

yarn add @os-team/auth-mobile

Install peer dependencies:

npx install-peerdeps @os-team/auth-mobile

Install pods:

npx pod-install

Add to the ios/MyProject/Info.plist file the following key:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>message</string>
    <string>readdle-spark</string>
    <string>airmail</string>
    <string>ms-outlook</string>
    <string>googlegmail</string>
    <string>inbox-gmail</string>
    <string>ymail</string>
    <string>superhuman</string>
    <string>yandexmail</string>
</array>

Add to the android/app/src/main/AndroidManifest.xml file inside the manifest tag the following content:

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="mailto"/>
  </intent>
</queries>

Replace the NavigationContainer from the @react-navigation/native package with the AuthNavigationContainer from the @os-team/auth-mobile package as follows:

import 'react-native-gesture-handler';
import React from 'react';
import { useColorScheme } from 'react-native';
import { RelayEnvironmentProvider } from 'react-relay/hooks';
import { ThemeProvider } from '@os-design-mobile/theming';
import createRelayEnvironment from './utils/createRelayEnvironment';
import AuthenticatedNavigator, {
  authenticatedInitialRouteName,
  authenticatedScreens,
} from './screens/AuthenticatedNavigator';
import { AuthNavigationContainer } from '@os-team/auth-mobile';

require('./i18next');

const PREFIXES = ['englika://', 'https://englika.com', 'https://englika.ru'];

const relayEnvironment = createRelayEnvironment();

const App: React.FC = () => {
  const colorScheme = useColorScheme();

  return (
    <RelayEnvironmentProvider environment={relayEnvironment}>
      <ThemeProvider initialTheme={colorScheme || undefined}>
        <AuthNavigationContainer
          secondLevelDomain='englika'
          linking={{
            prefixes: PREFIXES,
            config: {
              initialRouteName: authenticatedInitialRouteName,
              screens: authenticatedScreens,
            },
          }}
        >
          <AuthenticatedNavigator />
        </AuthNavigationContainer>
      </ThemeProvider>
    </RelayEnvironmentProvider>
  );
};

export default App;

Add locales in the i18next options:

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import RNLanguageDetector from '@os-team/i18next-react-native-language-detector';
import { locales } from '@os-team/auth-mobile';

i18next
  .use(RNLanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'ru'],
    ns: [],
    defaultNS: undefined,

    resources: {
      en: {
        auth: locales.en, // Add this line
      },
      ru: {
        auth: locales.ru, // Add this line
      },
    },

    interpolation: {
      escapeValue: false,
    },
  });

export default i18next;

Add the token middleware:

import { Environment, RecordSource, Store } from 'relay-runtime';
import createRelayNetwork from '@os-team/relay-network-creator';
import { token } from '@os-team/auth-mobile';

let environment: Environment;

const createRelayEnvironment = (): Environment => {
  if (!environment) {
    environment = new Environment({
      network: createRelayNetwork({
        url: 'http://192.168.0.103:4000/graphql',
        middlewares: [token],
      }),
      store: new Store(new RecordSource()),
    });
  }

  return environment;
};

export default createRelayEnvironment;

Sign out

To sign out, call the asynchronous signOut method from the useAuth hook.

Example of usage:

import React from 'react';
import { View } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import Button from '@os-design-mobile/button';
import Paragraph from '@os-design-mobile/paragraph';
import { RouteProp } from '@react-navigation/native';
import { AuthenticatedStackParams } from './AuthenticatedStack';
import { useAuth } from '../../lib';

interface HomeScreenProps {
  route: RouteProp<AuthenticatedStackParams, 'Home'>;
  navigation: StackNavigationProp<AuthenticatedStackParams, 'Home'>;
}

const HomeScreen: React.FC<HomeScreenProps> = () => {
  const { signOut } = useAuth();

  return (
    <View>
      <Paragraph>Congratulations! You are signed in.</Paragraph>
      <Button
        onPress={async () => {
          await signOut();
        }}
      >
        Sign out
      </Button>
    </View>
  );
};

export default HomeScreen;