Learn How Common Auth Use-Cases Are Built with Thin Backend
To implement a login button, you mainly need to call loginWithRedirect()
:
import { loginWithRedirect } from 'thin-backend';
function LoginButton() {
const isLoading = useState(false);
async function doLogin() {
setLoading(true);
await loginWithRedirect();
setLoading(false);
}
return <button onClick={doLogin} disabled={isLoading}>Login</button>
}
Call logout()
when implementing your logout button:
function LogoutButton() {
const isLoading = useState(false);
async function doLogout() {
setLoading(true);
await logout();
setLoading(false);
}
return <button onClick={doLogout} disabled={isLoading}>Logout</button>
}
After logging out, the user will be redirected to the login page again. You can override this redirect with a custom url redirect:
await logout({ redirect: 'https://example.com' });
If your app has no content that is available publicly, you might want to require login for everything.
If you're using the React Integration, pass the requireLogin
parameter to the <ThinBackend/>
component of your app:
function App() {
// The `requireLogin` triggers a redirect to the login page if not logged in already
return <ThinBackend requireLogin>
<div>Hello World</div>
</ThinBackend>
}
If you're not using React, you can call ensureIsUser()
before starting your app:
import { ensureIsUser } from 'thin-backend';
function startApp() {
// ...
}
ensureIsUser().then(startApp);
You might want to show different content based on whether the current user is logged in:
To allow your app to be used without login, you first need to make sure that requireLogin
is not set:
function App() {
// BAD: <ThinBackend requireLogin>
// GOOD: <ThinBackend>
return <ThinBackend>
<div>Hello World</div>
</ThinBackend>
}
Inside your react component use useIsLoggedIn()
to show content depending whether the user is logged in or not.
import { useIsLoggedIn, useCurrentUser } from 'thin-backend-react';
function Content() {
const isLoggedIn = useIsLoggedIn();
if (isLoggedIn === null) {
return <div>Loading ...</div>
}
if (isLoggedIn) {
return <LoggedInContent />
} else {
return <LoggedOutContent />
}
}
function LoggedInContent() {
const user = useCurrentUser();
return <div>Hello {user.name}!</div>
}
function LoggedOutContent() {
return <div>You are not logged in yet</div>
}
The useIsLoggedIn()
hook returns true
if someone is logged in, false
if there's no login session and null
while the login process is still pending.
useCurrentUser
for checking whether a user is logged inAt first glance it looks like a good idea to just use useCurrentUser()
and check it for null
to decide whether a user is logged in:
import { useCurrentUser } from 'thin-backend-react';
function AntiPatternExample() {
// THIS IS AN ANTI-EXAMPLE
// DON'T USE THIS CODE
const user = useCurrentUser();
if (user === null) {
return <LoggedOutContent/>
}
return <LoggedInContent/>
}
The problem with the above code is that the user might be seeing a logged out message for a short moment until the login process has completed. This is because the null
value is returned when the user is not logged in and also when the login process is still pending.
For a good user experience always use useIsLoggedIn()
in these cases.
Next to normal email login, Thin Backend also provides support for OAuth-login with third-party identity providers.
At the moment IHP supports these identity providers:
Contact us if you're identity provider of choice is missing.
To activate Login with Google
, you first need to get a google client id. A client id looks like this: 1234567890-abc123def456.apps.googleusercontent.com
.
You can create a google client id by logging into the Google API console and adding a new project. Additionally you need to enable and configure OAuth inside the API console. [Follow this Guide by Google if you haven’t done this before.](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid)
Open the Project Settings. Click Auth
. Now you can enter your Google Client-ID into the Login with Google
:
Click Activate Google Login
. Now Login with Google is activated.
In the background Thin Backend also added a google_user_id
column to your users table.
If you need any help or input, feel free to ask in the Thin Community Forum.