React Native SDK - Session management | Stytch B2B authentication

Session management

The SDK may be used to check whether a user has a cached session, view the current session, refresh the session, and revoke the session. To authenticate a session on your backend, you must use either the Stytch API or a Stytch Backend SDK.

Methods

Get session

The SDK provides the session.getSync method to retrieve the current session. The session.onChange method can be used to listen to session changes.

If logged in, the session.getSync method returns the cached session object. Otherwise it returns null.

The session.getInfo method is similar to session.getSync, but it returns an object containing the session object and a fromCache boolean. If fromCache is true, the session object is from the cache and a state refresh is in progress.

The session.onChange method takes in a callback that gets called whenever the Member Session object changes. It returns an unsubscribe method for you to call when you no longer want to listen for such changes.

The @stytch/react-native library also provides the useStytchMemberSession hook that implements these methods for you to easily access the session and listen for changes.

import React from 'react';
import { Text } from 'react-native';
import { useStytchMemberSession } from '@stytch/react-native/b2b';

export const Home = () => {
  const { session } = useStytchMemberSession();

  return session ? <Text> Member Session ID: {session.member_session_id}</Text> : <Text> No Active Session </Text>;
};

Refresh session

Wraps Stytch's authenticate Session endpoint and validates that the session issued to the user is still valid. The SDK will invoke this method automatically in the background. You probably won't need to call this method directly. It's recommended to use session.getSync and session.onChange instead.

Method parameters

session_duration_minutes int

import React, { useEffect } from 'react';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const RefreshSession = () => {
  const stytch = useStytchB2BClient();

  useEffect(() => {
    const refresh = () => {
      if (stytch.session.getSync()) {
        stytch.session.authenticate({
          session_duration_minutes: 60,
        });
      }
    };
    // Refresh session every 50 minutes
    let interval = setInterval(refresh, 3000000);
    return () => clearInterval(interval);
  }, [stytch]);

  return <></>;
};

RESPONSE

{
	"status_code": 200,
	"request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
	"member_session": {...},
	"session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
	"session_jwt": "",
	"member": {...},
	"organization": {...}
}

Revoke session

Wraps Stytch's revoke Session endpoint and revokes the member's current session. This method should be used to log out a member.

import React, { useCallback } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const LogOutButton = () => {
  const stytch = useStytchB2BClient();

  const logout = useCallback(() => {
    stytch.session.revoke();
  }, [stytch]);

  return (
    <View>
      <TouchableOpacity onPress={logout}>
        <Text>Log out</Text>
      </TouchableOpacity>
    </View>
  );
};

RESPONSE

{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141"
}

Exchange session

Wraps Stytch's exchange session endpoint and exchanges the member's current session for a session in the specified Organization.

If this method succeeds and the Member is not required to complete MFA, the Member will be logged in, granted an active session, and the session data will be persisted on device.

If this method succeeds and MFA is required, the intermediate session token will be persisted on device.

You can listen for successful login events anywhere in the codebase with the stytch.session.onChange() method or useStytchMemberSession hook.

Method parameters

organization_id* string

session_duration_minutes* int

locale string

import { Text, TouchableOpacity, View } from 'react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const Login = () => {
  const stytch = useStytchB2BClient();

  const exchange = () => {
    stytch.session.exchange({
      organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
      session_duration_minutes: 60,
    });
  };

  return (
    <View>
      <TouchableOpacity onPress={exchange}>
        <Text>Log in</Text>
      </TouchableOpacity>
    </View>
  );
};

RESPONSE

{
	"request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
	"status_code": 200,
	"member_id": "member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
	"session_jwt": "example_jwt",
	"session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
	"intermediate_session_token": "",
	"member_authenticated": true,
	"mfa_required": null,
	"member_session": {...},
	"member": {...},
	"organization": {...}
}

Get tokens

Returns the session_token and session_jwt for the active session. Otherwise retuns null.

import React, { useEffect, useMemo } from 'react';
import { useStytchB2BClient, useStytchMemberSession } from '@stytch/react-native/b2b';

export const SendSessionTokensToBackend = () => {
  const stytchClient = useStytchB2BClient();
  const { session } = useStytchMemberSession();

  // This will update the sessionTokens every time the session updates (on login, session refresh, MFA, etc.)
  const sessionTokens = useMemo(() => {
    return stytchClient.session.getTokens();
  }, [session]);

  // This useEffect block will trigger anytime the sessionTokens change
  useEffect(() => {
    if (sessionTokens) {
      // Do something with tokens
      console.log('session token', sessionTokens.session_token);
      console.log('session jwt', sessionTokens.session_jwt);
    }
  }, [sessionTokens]);

  return null;
};

Revoke sessions for Member

Wraps Stytch's revoke Session endpoint and revokes all Sessions for a given Member.

Authenticated Method

This method requires valid Session for a Member with permission to perform the revoke-sessions Action on the stytch.member Resource.

Before using this method, enable Member actions & permissions in the SDK Configuration page. To learn more, see our RBAC guide.

import { Text, TouchableOpacity, View } from 'react-native';
import React, { useCallback } from 'react';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const RevokeSessionsButton = () => {
  const stytch = useStytchB2BClient();

  const revokeSessions = useCallback(() => {
    stytch.session.revokeForMember({ member_id: 'member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f' });
  }, [stytch]);

  return (
    <View>
      <TouchableOpacity onPress={revokeSessions}>
        <Text>Revoke sessions</Text>
      </TouchableOpacity>
    </View>
  );
};

RESPONSE

{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141"
}