supertokens-auth-reactHandling session tokens
If using our frontend SDK#
For Web#
success
No action required.
Our frontend SDK handles everything for you. You only need to make sure that you have called supertokens.init before making any network requests.
Our SDK adds interceptors to fetch and XHR (used by axios) to save and add session tokens from and to the request.
note
By default, our web SDKs use cookies to provide credentials.
For React-Native#
Our frontend SDK handles everything for you. You only need to make sure that you have added our network interceptors as shown below
note
By default our mobile SDKs use a bearer token in the Authorization header to provide credentials.
For Android#
note
By default our mobile SDKs use a bearer token in the Authorization header to provide credentials.
For iOS#
note
By default our mobile SDKs use a bearer token in the Authorization header to provide credentials.
Getting the access token#
caution
Our SDK automatically handles adding the access token to request headers. You only need to add the access token to the request if you want to send the access token to a different API domain than what is configured on the frontend SDK init function call.
If you are using a header-based session, you can read the access token on the frontend using the getAccessToken method:
- Web
- Mobile
- Via NPM
- Via Script Tag
import Session from "supertokens-web-js/recipe/session";
async function getToken(): Promise<void> {
const accessToken = await Session.getAccessToken();
console.log(accessToken);
}
async function getToken(): Promise<void> {
const accessToken = await supertokensSession.getAccessToken();
console.log(accessToken);
}
- React Native
- Android
- iOS
- Flutter
import SuperTokens from 'supertokens-react-native';
async function getToken(): Promise<void> {
const accessToken = await SuperTokens.getAccessToken();
console.log(accessToken);
}
import android.app.Application
import com.supertokens.session.SuperTokens
class MainApplication: Application() {
fun getToken(): String {
return SuperTokens.getAccessToken(applicationContext)
}
}
import UIKit
import SuperTokensIOS
class ViewController: UIViewController {
func getToken() -> String? {
return SuperTokens.getAccessToken()
}
}
import 'package:supertokens_flutter/supertokens.dart';
Future<String?> getToken() async {
return await SuperTokens.getAccessToken();
}
If not using our frontend SDK#
caution
We highly recommend using our frontend SDK to handle session token management. It will save you a lot of time.
In this case, you will need to manually handle the tokens and session refreshing, and decide if you are going to use header or cookie-based sessions.
For browsers, we recommend cookies, while for mobile apps (or if you don't want to use the built-in cookie manager) you should use header-based sessions.