Saltar al contenido principal

Sign users in to a React Native app

This guide explains how to run the Casdoor example for React Native and how to add Casdoor sign-in to your own app with casdoor-react-native-sdk.

Learning outcomes​

  • Run the example app on iOS and Android.
  • Install and initialize casdoor-react-native-sdk.
  • Sign a user in and read the user from the token.

What you need​

  • A React Native development environment, with an emulator or a connected device
  • An application in Casdoor

Sample code​

Run the example​

  1. Clone the example and install its dependencies:

    git clone git@github.com:casdoor/casdoor-react-native-example.git
    cd casdoor-react-native-example
    yarn install
    cd ios/ && pod install && cd ..

  2. Start an emulator or connect a device.

  3. Start the app.

    • On iOS: Run react-native start, and then react-native run-ios.
    • On Android: Run react-native start, and then react-native run-android.
    iOSAndroid
    iOS-loginAndroid-login

  4. Click Login with Casdoor. The Casdoor sign-in screen opens.

    iOSAndroid
    iOS-casdoor-loginAndroid-casdoor-login

  5. Sign in. The app shows the profile of the user.

    iOSAndroid
    iOS-userInfoAndroid-userInfo
iOSAndroid
iOS-gifAndroid-gif

Add sign-in to your app​

  1. Install the SDK:

    # NPM
    npm i casdoor-react-native-sdk

    # Yarn
    yarn add casdoor-react-native-sdk

  2. Initialize the SDK. The settings are strings.

    Nombre (en orden)ObligatorioDescripción
    serverUrlYestu URL del servidor Casdoor
    clientIdSíel ID de Cliente de tu aplicación Casdoor
    appNameSíel nombre de tu aplicación Casdoor
    organizationNameSíel nombre de la organización Casdoor conectada con tu aplicación Casdoor
    redirectPathNothe path of the redirect URL for your Casdoor application, will be /callback if not provided
    signinPathNola ruta de la URL de inicio de sesión para tu aplicación Casdoor
    import SDK from 'casdoor-react-native-sdk'

    const sdkConfig = {
      serverUrl: 'https://door.casdoor.com',
      clientId: 'b800a86702dd4d29ec4d',
      appName: 'app-example',
      organizationName: 'casbin',
      redirectPath: 'http://localhost:5000/callback',
      signinPath: '/api/signin',
    };
    const sdk = new SDK(sdkConfig)

  3. Call the SDK to sign the user in and to read the user:


    // get the signin url
    getSigninUrl()

    // get Access Token
    getAccessToken(redirectUrl); // http://localhost:5000/callback?code=b75bc5c5ac65ffa516e5&state=gjmfdgqf498

    // decode jwt token to get user info
    JwtDecode(jwtToken)

For the complete API, see the casdoor-react-native-sdk repository.

See also​