Logging in and out
Our React SDK is designed to be easy-to-use and flexible, creating a smooth developer experience by taking care of the common use cases. It is built on top of our core JavaScript SDK, which provides lower level access to /id entities.
This guide will show you how you can log your users in and out of your apps. We'll start where we left off with the app in the setup guide.
Configuring the provider
By default the <SlashIDProvider
> will keep the session state in memory, so the user token will persist as long as we perform client side navigation. In order to keep the token around, we'll set the tokenStorage
prop value to localStorage
:
<SlashIDProvider oid="ORGANIZATION_ID" tokenStorage="localStorage">
<App />
</SlashIDProvider>
Keeping track of user state
With this setup, the <App>
component and all other components rendered as children of <App>
will now be able to consume the <SlashIDProvider>
with the useSlashID()
hook.
import { useSlashID } from "@slashid/react"
function App() {
const { user } = useSlashID()
return <p>{user ? "Logged in" : "Logged out"}</p>
}
The value of user
variable will either be undefined
or an instance of the User
class.
Logging in
Let's create a login form following the same approach. We'll use the same hook to get the logIn
function.
function LoginForm() {
const { user, logIn } = useSlashID()
const [email, setEmail] = useState("")
return (
<form
onSubmit={(e) => {
e.preventDefault()
logIn({
handle: {
type: "email_address",
value: "example@email.com",
},
factor: { method: "email_link" },
})
}}
>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<button type="submit">Log in</button>
<p>{user ? "Logged in" : "Logged out"}</p>
</form>
)
}
Once logIn
resolves, this component will render again with the user
variable now having a value. To learn more about the available authentication methods, please check SlashID.id().
Logging out
In order to log out we'll call the logOut
function.
function LogoutButton() {
const { logOut } = useSlashID()
return <button onClick={logOut}>Log out</button>
}
Now all the components in the app that consume the useSlashID
hook will render again, with the user
variable again having the value of undefined
.
Control Components
The React SDK also includes our first set of control components - <LoggedIn
> and <LoggedOut
>. These components will help you conditionally render the UI based on the SDK readiness and the user authentication states. Let's replace the ternary operator with these components.
function LoginForm() {
const { logIn } = useSlashID()
const [email, setEmail] = useState("")
return (
<form
onSubmit={(e) => {
e.preventDefault()
logIn({
handle: {
type: "email_address",
value: "example@email.com",
},
factor: { method: "email_link" },
})
}}
>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<LoggedOut>
<button type="submit">Log in</button>
</LoggedOut>
<LoggedIn>
<LogoutButton />
</LoggedIn>
</form>
)
}