React Native app

The casdoor-react-native-example and casdoor-react-native-sdk show how to use Casdoor in React Native.

Run the example

Quick start

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

iOS: react-native start then react-native run-ios
Android: react-native start then react-native run-android

Start an emulator or connect a device before running.

Vista previa

iOS	Android

Click Login with Casdoor to open the Casdoor login screen.

iOS	Android

After sign-in, the user profile is shown.

iOS	Android

iOS	Android

Integration

The example uses casdoor-react-native-sdk. To use it in your own project:

1. Install the SDK

# NPM
npm i casdoor-react-native-sdk

# Yarn
yarn add casdoor-react-native-sdk

2. Initialize

Set these 7 string parameters (all required except redirectPath and signinPath):

Nombre (en orden)	Obligatorio	Descripción
serverUrl	Sí	tu URL del servidor Casdoor
clientId	Sí	el ID de Cliente de tu aplicación Casdoor
appName	Yes	el nombre de tu aplicación Casdoor
organizationName	Yes	el nombre de la organización Casdoor conectada con tu aplicación Casdoor
redirectPath	No	la ruta de la URL de redirección para tu aplicación Casdoor, será /callback si no se proporciona
signinPath	No	la 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. Use the SDK

Typical flow:

// 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) 

See casdoor-react-native-sdk for the full API.