React Native & Java Quickstart

This is a quickstart guide to help you integrate Descope with your React Native & Java application. Follow the steps below to get started.

Include the Descope React Native Package

Incorporate the Descope React Native SDK as a package. Run the following command:

Terminal

npm i --save @descope/react-native-sdk

Import the React Native SDK

Proceed to import the Descope React Native package.

App.js

import { useCallback } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { AuthProvider, useFlow, useDescope, useSession } from '@descope/react-native-sdk' // <-- Import the Descope React Native SDK
 
export default function App() {
	// ...
}

Initialize Descope with a Custom Project ID

Wrap your app with the Auth Provider and pass in the Descope Project ID (found on your Descope project page). This is needed to activate the SDK.

Note

Optionally, add the baseUrl parameter if using a CNAME in your Descope project (ex: https://auth.company.com).

App.js

export default function App() {
  return (
    <AuthProvider projectId="__ProjectID__"> {/* <-- Add your Descope Project ID */}
	  {/* ... */}
    </AuthProvider>
  );
}

Define and Host Your Flow

Your Descope console provides customizable, predefined authentication flows which are hosted for you. You can also host the flow yourself. You'll use the url of the hosted flow later in your code.

App.js

export default function App() {
  const flow = useFlow()
 
  const startFlow = async () => {
    try {
      const resp = await flow.start('https://auth.descope.io/login/__ProjectID__', '<URL_FOR_APP_LINK>')
      await manageSession(resp.data)
    } catch (e) {
      // handle errors
    }
  }
 
  return (
    <AuthProvider projectId="__ProjectID__">
	  {/* ... */}
    </AuthProvider>
  );
}

(Android Only) Configure App Links, Activity, and Linking

For Android (iOS works with just a flow url), follow the instructions in our README to establish App Links, create an activity, and handle token exchange.

Launch Your Flow

Use the flow 'start' function to initiate authentication with a custom flow (URL from step 6). For Android, add the deep link (URL from step 7).

Note

If you need to support Magic Link redirects, follow the steps in our README.

Leverage React Native SDK's Hooks and Session Management Functions

Descope provides many different hooks to check if the user is authenticated, session is loading etc. You can use these to customize the user experience:

useSession - This is used for implementing loading screens while sessions are being established (check session), getting user information (session.user.name), etc.
useDescope - Exposes the Descope SDK to your app for additional customization (e.g., descope.logout()).
useFlow - Used for handling flow related events (e.g., flow.start()).

For more specifics on implementing Session Management, check out our Mobile Session Validation page.

For backend Session Validation, continue reading!

App.js

export default function App() {
  const flow = useFlow()
 
  const { session, clearSession, manageSession } = useSession()
  const { logout } = useDescope()
 
  const handleLogout = useCallback(() => {
    logout()
  }, [logout])
 
  const startFlow = async () => {
    try {
      const resp = await flow.start('https://auth.descope.io/login/__ProjectID__', '<URL_FOR_APP_LINK>')
      await manageSession(resp.data)
    } catch (e) {
      // handle errors
    }
  }
 
  const exampleFetch = async () => {
    const res = await fetch('/path/to/server/api', {
      headers: {
        Authorization: `Bearer ${session.sessionJwt}`,
      },
    })
  }
 
  return (
    <AuthProvider projectId="__ProjectID__">
	  {session ? (
        <View style={styles.container}>
          <Text>Welcome! {session.user.name}</Text>
          <Button onPress={handleLogout} title="Logout" />
        </View>
     ) : (
        <View style={styles.container}>
          <Text>Welcome!</Text>
          <Button onPress={startFlow} title="Start Flow" />
        </View>
     )}
    </AuthProvider>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

At this point, you're done with the frontend. If you would like to also handle Session Management in your backend, keep on reading!

Install Backend SDK

Install the SDK by including the SDK in your pom.xml file (for installation via Maven).

pom.xml

<dependency>
	<artifactId>java-sdk</artifactId>
	<groupId>com.descope</groupId>
	<version>1.0.25</version>
</dependency>

Import and Setup Backend SDK

You'll need import and setup all of the packages from the SDK.

If you're using a CNAME with your Descope project, make sure to export the Base URL (e.g. export DESCOPE_BASE_URI="https://api.descope.com") when initializing descope_client.

Application.java

package com.descope.java_sample_app;
 
// descope imports start
import com.descope.client.*;
import com.descope.exception.DescopeException;
import com.descope.model.jwt.Token;
import com.descope.sdk.auth.AuthenticationService;
// descope imports end
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.RestController;
 
@SpringBootApplication
@RestController
public class JavaSampleAppApplication {
 
	public static void main(String[] args) {
		SpringApplication.run(JavaSampleAppApplication.class, args);
	}
 
}

Implement Session Validation

You will need to then fetch the session token from the Authorization header of each request, and use the SDK to validate the token.

The frontend SDK will store the session token in either a cookie or your browser's local storage. If using a cookie, the token will be sent to your app server automatically with every request.

Application.java

@SpringBootApplication
@RestController
public class JavaSampleAppApplication {
 
	public static void main(String[] args) {
		SpringApplication.run(JavaSampleAppApplication.class, args);
	}
	
	public void validateSession(String sessionToken, String refreshToken) {
		var descopeClient = new DescopeClient(Config.builder().projectId("__ProjectID__").build());
 
		// Validate the session. Will return an error if expired
		AuthenticationService as = descopeClient.getAuthenticationServices().getAuthService();
		try {
			Token t = as.validateSessionWithToken(sessionToken);
		} catch (DescopeException de) {
			// Handle the unauthorized error
		}
 
		// If ValidateSessionWithRequest raises an exception, you will need to refresh the session using
		try {
			Token t = as.refreshSessionWithToken(refreshToken);
		} catch (DescopeException de) {
			// Handle the unauthorized error
		}
 
		// Alternatively, you could combine the two and
		// have the session validated and automatically refreshed when expired
		try {
			Token t = as.validateAndRefreshSessionWithTokens(sessionToken, refreshToken);
		} catch (DescopeException de) {
			// unauthorized error
		}
	}
	
}

Congratulations

Now that you've got the authentication down, go focus on building out the rest of your app!

Checkpoint

Your application is now integrated with Descope. Please test with sign-up or sign-in use case.

Need help?

Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.

Customize

Was this helpful?

Checkpoint

On this page