Native Mobile Application

Types

Native applications can work with different types of mobile app applications. Even if the name is native you can use that for react native applications too.

So native application is a proper one for:

1. Expo apps
2. React native apps
3. Android
4. iOS
5. Ionic / Xamarim / Cordova / Flutter

SDKs

You can choose the correct SDKs to integrate with the platforms listed above:

1. Android: GitHub - auth0/Auth0.Android: Android toolkit for Auth0 API
2. Cordova: npm install auth0-js @auth0/cordova --save
3. Flutter: flutter pub add auth0\_flutter
4. Expo / RN: npm install react-native-auth0 --save
5. Ionic & Capacitor: npm install @auth0/auth0-angular
6. Ionic React & Capacitor: npm install @capacitor/browser @capacitor/app
7. iOS (Swift): swift
8. Xamarin iOS: : Install-Package Auth0.OidcClient.iOS
9. Xamarin Android: : Install-Package Auth0.OidcClient.Android

Set up

The guides below demonstrates how to integrate your Native Application with the Identity Product, on our development, testing, staging and production environments.

All Native Applications

Before we are able to create your application and share the needed details you need to provide:

Callback url

• Android: {YOUR\_APP\_PACKAGE\_NAME\_OR\_CUSTOM\_SCHEME}://{IDENTITY\_DOMAIN}/android/{YOUR\_APP\_PACKAGE\_NAME}/callback
  • Example com.mobile.android.app://ba-stg.identity.stg.iagl.digital/android/com.mobile.android.app/callback
• iOS: {YOUR\_BUNDLE\_IDENTIFIER\_OR\_CUSTOM\_SCHEME}://{IDENTITY\_DOMAIN}/ios/{YOUR\_BUNDLE\_IDENTIFIER}/callback
  • Example com.mobile.ios.app://ba-stg.identity.stg.iagl.digital/android/com.mobile.ios.app/callback

After sharing the needed details (above) we will provide, per environment

• IdP Domain (issuerBaseURL)
• Client ID

Set up for Expo

1. You need to keep in mind that react-native-auth0 SDK doesn't work with Expo Go because he needs a couple of native codes to work. So in that case, to test all the identity flow you should use custom dev apps or EAS build to test.
   1. This SDK is not compatible with "Expo Go" app. It is compatible only with Custom Dev Client and EAS builds.
2. The first thing you need to add is the library
   1. by npm npm install react-native-auth0 --save
   2. by yarn yarn add react-native-auth0
3. Update your app.json:

{ "expo":
  {
    ...
    "plugins":
    [
      [ "react-native-auth0",
        {
          "domain": "IDENTITY_DOMAIN",
          "customScheme": "YOUR_CUSTOM_SCHEME" // this optional, if you dont use remember to use your identity,
        }
      ]
    ]
  }
}

4. Provide the callback URLs to the identity team, that's the only way we can create your app.
   1. Android: {YOUR\_APP\_PACKAGE\_NAME\_OR\_CUSTOM\_SCHEME}://{IDENTITY\_DOMAIN}/android/{YOUR\_APP\_PACKAGE\_NAME}/callback
   2. iOS: {YOUR\_BUNDLE\_IDENTIFIER\_OR\_CUSTOM\_SCHEME}://{IDENTITY\_DOMAIN}/ios/{YOUR\_BUNDLE\_IDENTIFIER}/callback
5. With the SDK installed and the plugin on the app.json, it’s just a matter of usage of IdentityProvider on your authentication layer. Here you can see one

import React from 'react'
import { Button, Text, View } from 'react-native'
import { useAuth0, Auth0Provider as IdentityProvider } from 'react-native-auth0'

const Home = () => {
  const { authorize, clearSession, user } = useAuth0()

  const onLogin = async () => {
    try {
      await authorize({ scope: 'openid profile email' })
    } catch (e) {
      console.log(e)
    }
  }

  const onLogout = async () => {
    try {
      await clearSession()
    } catch (e) {
      console.log('Log out cancelled')
    }
  }

  const loggedIn = user !== undefined && user !== null
  return (
    <View style={styles.container}>
      {loggedIn && <Text>You are logged in as {user.name}</Text>}
      {!loggedIn && <Text>You are not logged in</Text>}

      <Button
        onPress={loggedIn ? onLogout : onLogin}
        title={loggedIn ? 'Log Out' : 'Log In'}
      />
    </View>
  )
}

const App = () => {
  return (
    <IdentityProvider domain={'IDENTITY_DOMAIN'} clientId={'YOUR_CLIENT_ID'}>
      <Home />
    </IdentityProvider>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
})

export default App

6. After that login part you can always get the user property from the SDK hook: useAuth0. That hook will provide a user property for you and if that's empty it's because the user is not authenticated.

Set up for React Native

1. For react native without expo you need to handle a couple of more native configurations before you use useAuth0 and IdentityProvider
2. The first step is to install the package:
   1. by npm: npm install react-native-auth0 --save
   2. by yarn: yarn add react-native-auth0
3. After that you need to an extra step for

cd ios
pod install

4. Configure your android build.gradle native code:

android {
    defaultConfig {
        // Add the next line
        manifestPlaceholders = [auth0Domain: "IDENTITY_DOMAIN", auth0Scheme: "${applicationId}"]
    }
...
}

5. Configure your iOS delegate file (ios/<YOUR PROJECT>/AppDelegate.mm ):

#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

6. In the ios folder, open the Info.plist and locate the value for CFBundleIdentifier

<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

7. Creates a custom Info.plist keys for CFBundleURLTypes

<key>CFBundleURLTypes</key>
<array>
<dict>
    <key>CFBundleTypeRole</key>
    <string>None</string>
    <key>CFBundleURLName</key>
    <string>auth0</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    </array>
</dict>
</array>

8. After all that configuration it's just a matter of usage the hook and provider, check one example:

import React from 'react'
import { Button, Text, View } from 'react-native'
import { useAuth0, Auth0Provider as IdentityProvider } from 'react-native-auth0'

const Home = () => {
  const { authorize, clearSession, user } = useAuth0()

  const onLogin = async () => {
    try {
      await authorize({ scope: 'openid profile email' })
    } catch (e) {
      console.log(e)
    }
  }

  const onLogout = async () => {
    try {
      await clearSession()
    } catch (e) {
      console.log('Log out cancelled')
    }
  }

  const loggedIn = user !== undefined && user !== null
  return (
    <View style={styles.container}>
      {loggedIn && <Text>You are logged in as {user.name}</Text>}
      {!loggedIn && <Text>You are not logged in</Text>}

      <Button
        onPress={loggedIn ? onLogout : onLogin}
        title={loggedIn ? 'Log Out' : 'Log In'}
      />
    </View>
  )
}

const App = () => {
  return (
    <IdentityProvider domain={'IDENTITY_DOMAIN'} clientId={'YOUR_CLIENT_ID'}>
      <Home />
    </IdentityProvider>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
})

export default App

Other native setups

Please follow what the SDKs recommend and ping us if you need some support with scopes, callback URLs, app name, app logo, or any other native app configuration that you might need (refresh token, expire token time and etc)