Scrivito Web Interface Builder supports logging in to a website as a visitor via identity providers such as Google. This allows you to provide selected content only to those having identified themselves towards your site.

In this tutorial, we are going to show you how to integrate visitor authentication into your website based on the Interface Builder. We will use a third-party package for this and add a “Log in with Google” button to the top navigation of your Interface Builder application.

To follow along, authentication via Google needs to be set up first in your Google account and for your Interface Builder. For details on how to accomplish this, see Setting up Identity Providers for Your Website. It’s easy.

All that’s needed here is the ID of your authentication client at Google.

The package we will be using is react-google-oauth, which has been derived from react-google-login. It provides us with an API component as well as customizable log-in and log-out components. Events allow us to make logged-in visitors known to the Interface Builder. Only then, restricted content will be made available to those visitors.

For the Interface Builder to let logged-in visitors see restricted content, the SDK needs to be put into visitor authentication mode. This can be done in a call to Scrivito.configure which must be called when the application initializes, i.e. immediately after it has been loaded into the browser. As a consequence, the app needs to reload after a visitor has logged in. Then, the visitor’s access token originating from the identity provider needs to be passed to the SDK so that restricted pages can be delivered based on the validity of the token.

To be able to turn “visitor authentication” mode on when the app is loaded, we need to determine whether the visitor has already logged in or not. In our LoginWithGoogle component we are going to show you below, we’ll persist the login state in the browser’s local storage and set a constant for accessing it, visitorLoggedInWithGoogle. This allows us to switch authentication on or off during the initialization phase:

As mentioned, our component is based on the react-google-oauth package, so let’s install it first. Switch to the root of your project directory, then run:

As the components in this package use Google’s API, the corresponding URL or domain, “apis.google.com”, needs to be added to the “script-src” section of the content security policy, which is defined in “public/_headersCsp.json”. Also, the component uses button images from “csi.gstatic.com”.

Now, in your project’s “src/Components” directory, create the component file and add the following code to it:

The GoogleAPI component is for initializing Google’s API and provides us with two events, onUpdateSigninStatus and onInitFailure. Inside GoogleAPI, either a GoogleLogin or a GoogleLogout component is rendered, depending on the login state we are setting and clearing via the onUpdateSigninStatus callback.

After successfully clicking the login button, the onUpdateSigninStatus callback is executed, causing setGoogleVisitor to be called. If no visitor has been logged in before, setGoogleVisitor persists the new login state in the local storage and reloads the page.

The reload causes the app to be initialized and, of course, the components to be rendered again. This time, the call to Scrivito.configure enables visitorAuthentication, and setGoogleVisitor calls setVisitorIdToken to pass the ID token to the SDK.

If the visitor actively logs out, the new login state is persisted by removing loggedInWithGoogle from the local storage. Then the page is reloaded, causing visitorAuthentication to be set to false in Scrivito.configure. If the page last viewed by the visitor is restricted, the 404 error page will be displayed.

Now that we have the component, let’s use it in an Interface Builder app! For having a means to log in available wherever the visitor enters our site, we will add the component to the top navigation bar.

Open “FullNavigation.js” in “src/Components/Navigation/” and add the import statement as well as the component to this file as indicated:

That was it! After starting your app, you should see the log-in button in the navigation bar. Clicking it opens Google’s sign-in dialog.

If you don’t want the log-in/out button to be displayed to logged-in editors, there’s Scrivito.isEditorLoggedIn to conditionally hide it. Note that the SDK doesn’t apply restrictions if an editor is logged in.

The component lets you access the user profile sent by Google after logging in. You could display some pieces of this data, e.g. the user’s name, in addition to the logout button.

If you would like to have the login/logout functionality available as a widget, put the GoogleAPI component in your application file (App.js), and implement the widget around the buttons.