@collaboware/solid-authn-react-native
v1.0.5
Published
Solid-OIDC auth for React-Native
Downloads
1
Readme
Solid Authn React Native
⚠️ WARNING: Use at your own risk. This library has not undergone a 3rd party security review.
A library for Solid Authentication in React Native Expo:
- Support for iOS, Android, and Web
- Works with the following servers:
- ✅ Node Solid Server
- ❎ Community Solid Server (CSS does not currently allow mobile URL schemes. I'll fix that in the future, but for now you can't use this library with CSS)
- 🆗 Enterprise Solid Server (ESS allows you to log in, but fetches return a 401. I'll have to look into that)
- Same API for mobile and web.
- Works with Expo (This has not been tested with ejected React Native)
Installation
npm i solid-authn-react-native
Add a scheme
to Expo's app.json file. This will allow the Pod's Identity Provider to redirect back to your app.
{
"expo": {
// ...
"scheme": "mycustomscheme",
// ...
}
}
Usage
For a full example, see the example-expo project.
This project follows the same interface as the @inrupt/solid-client-authn-browser
library. See Inrupt's documentation here
import React, { FunctionComponent, useCallback, useState } from "react";
import { Button, View, Text } from "react-native";
import useAsyncEffect from "use-async-effect";
import {
handleIncomingRedirect,
login,
getDefaultSession,
} from "solid-authn-react-native";
import { makeUrl } from "expo-linking";
const App: FunctionComponent = () => {
const [webId, setWebId] = useState<string | undefined>();
const onSessionChanged = useCallback(() => {
if (getDefaultSession().info.isLoggedIn) {
setWebId(getDefaultSession().info.webId);
} else {
setWebId(undefined);
}
}, []);
// Handle Incoming Redirect
useAsyncEffect(async () => {
await handleIncomingRedirect({
restorePreviousSession: true,
});
onSessionChanged();
}, [onSessionChanged]);
// Login
const onLoginPress = useCallback(
async (issuer: string) => {
// The makeUrl function will make a url using the mobile scheme
const callbackUrl = makeUrl("auth-callback");
await login({
oidcIssuer: issuer,
redirectUrl: callbackUrl,
clientName: "My application",
});
onSessionChanged();
},
[onSessionChanged]
);
return (
<View style={{ paddingTop: 100 }}>
<Text>
{webId ? `You are logged in as ${webId}` : "You are not logged in"}
</Text>
<Button
title="Log in with SolidWeb.org (NSS)"
onPress={() => onLoginPress("https://solidweb.org")}
/>
</View>
);
};
export default App;