Auth

Learn How Common Auth Use-Cases Are Built with Thin Backend

Login Button

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>
}

Logout 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' });

Require Login Globally

If your app has no content that is available publicly, you might want to require login for everything.

React

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>
}

Without React

If you're not using React, you can call ensureIsUser() before starting your app:

import { ensureIsUser } from 'thin-backend';

function startApp() {
    // ...
}

ensureIsUser().then(startApp);

Partial Logged In Pages

You might want to show different content based on whether the current user is logged in:

1. 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>
   }
   

2. 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.

Anti-Pattern: Don't use useCurrentUser for checking whether a user is logged in

At 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.

OAuth

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:

• Google
• GitHub

Contact us if you're identity provider of choice is missing.

Login with Google

1. 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)

2. 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.