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.

Preview

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

Name (in order)	Must	Description
serverUrl	Yes	your Casdoor server URL
clientId	Yes	the Client ID of your Casdoor application
appName	Yes	the name of your Casdoor application
organizationName	Yes	the name of the Casdoor organization connected with your Casdoor application
redirectPath	No	the path of the redirect URL for your Casdoor application, will be /callback if not provided
signinPath	No	the path of the signin URL for your Casdoor application

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.