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.

Pré-visualização

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

Nome (em ordem)	Obrigatório	Descrição
serverUrl	Sim	o URL do servidor Casdoor
clientId	Sim	o ID do Cliente da sua aplicação Casdoor
appName	Yes	o nome da sua aplicação Casdoor
organizationName	Yes	o nome da organização Casdoor conectada com a sua aplicação Casdoor
redirectPath	Não	o caminho da URL de redirecionamento para a sua aplicação Casdoor, será /callback se não fornecido
signinPath	Não	o caminho da URL de login para a sua aplicação 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.