Follow on Twitter: Codeible (@codeible) / Twitter.
Hello, in this tutorial, I will show you how to create a Login system in Unreal Engine 5 using Firebase and the Firebase Blueprint Plugin Library.
Here’s what we’ll be doing.
When we start our app, there will be a simple login screen. We can reset our password, create an account, OR sign in.
Prerequisites
Before we begin, we need to setup a few things for Unreal Engine and Firebase.
- First download the assets I am using to follow along.
- Then go to the Unreal Marketplace and install the Firebase Blueprint Plugin for Unreal Engine.
- Now go to console.firebase.google.com and sign in with a Gmail account. We’ll use Firebase to store the users’ account information.
- Add a new project and name it whatever you want.
5. Inside the console. Expand the “Build” tab and select Authentication.
6. Click on “Get started” and enable the Email and Password sign in method.
7. Click on the “Build” tab again and select Realtime Database.
8. Click on “Create Database” and proceed to complete the steps.
Once Authentication and Realtime Database is ready, we’ll need to download the Google Services file for this Firebase project so we can connect to it using the plugin.
9. Click on the Gear icon and select Project Settings.
10. Scroll down to the “Your apps” section and create an Android project if you are using Windows. For Mac users, create an iOS app instead.
11. Insert a name for the package, then click on Register app.
12. Download the google-services file and then click next until you reach the last step.
13. Click on Continue to console to complete the process.
14. Now that the setup for Firebase is completed, create a new Unreal Engine project.
15. Open the Plugins Menu and search for FBP.
16. Enable it and restart the project.
17. Locate the Google-Services file that you downloaded earlier and move it to the Unreal Engine project folder. The file will be used by the Plugin to connect with your Firebase project.
That’s all for the setup, we can start building the UI for our login screen.
Plugin Information
Setup Video: https://www.youtube.com/watch?v=CH0p2kNH99s
View YouTube Playlist here (On Going): Unreal Engine 5 — Firebase Blueprint Plugin Library — YouTube
Plugin URL: Firebase Blueprint Plugin Library in Code Plugins — UE Marketplace (unrealengine.com)
Creating the UI
We’ll create all the components for the UI first and then I’ll explain what we’ll do with them after.
- In the Content Drawer, create a Game Instance call App_Instance.
- Then Create a new Level and call it Login_Level.
- Create 4 blank widgets.
- Call one Login_Page. Another call Reset_Password_Page. The 3rd Create_Account_Page, and the last 1 Game_Widget.
- Now Import all the images from the assets folder.
We’ll use the App_Instance to handle the login state changes and navigate the user to different screens based on whether they logged in or not. If they are logged in, the game screen should show up, otherwise the login scren should be active.
3 of the widgets represent the 3 different UI for the login screen and the Game_Widget is for the game so we can log out.
App_Instance Blueprint
Now open the App_Instance blueprint.
Add the “Event Init” node and then call “Listen For Sign In Changes” from the plugin.
Click and hold on the On Signed In callback pin and drag on an empty spot on the Blueprint. Select “Add Event” then “Add Custom Event.”
Do the same for On Signed Out as well.
We’re listening to the Sign In states in the Game Instance because when the game starts, it will execute the Event Init node and then attach a listener that’ll detect whether someone signed in or out of the app.
Another reason why it is done in the Game Instance is because it’ll remain active throughout the lifecycle of your app. This way, we can direct the user to different screens based on their login states.
To test this, add 2 Open Level by Object Reference nodes and connect them to the callbacks.
For On Signed In, we want to display the default level since that’s our game. For On Signed Out, use the Login_Level.
Compile, save, and go to the Project Settings under the Edit menu.
Select the Maps & Modes menu and scroll down until you see the section for Game Instance. In the Game Instance Class dropdown, select the App_Instance blueprint that we created.
Close the menu, and and then run the app. We should see a black screen since we did not add anything to the Login_Level.
Login Level Blueprint
Open the Login_Level Blueprint.
Add the Event Begin Play node. Then grab the Player Controller and call Set Show Mouse Cursor. This’ll allow us to see the mouse cursor so we can interact with the login page.
After that, use the Create Widget node and add it to the View Port. Inside the Create Widget node, click on the drop down menu and select the Login_Page widget.
Compile, save, and run the app to see if everything is working. Since our widget is empty, we’ll still see a black screen.
Let’s add some content to it.
In the Content Drawer, open the Login_Page widget.
In the Palette, add a Canvas and set the size to 1280 x 720.
Go back to the Palette and place image for the login page inside the canvas. Set the Anchor to use the 4 corners and then set all the offset to 0 to fill the screen. Once the image is resized, set the anchor to the center.
If we compile, save and run the app, it’ll no longer show a black screen. All we need now is to add the text fields and buttons for the UI.
In the palette, add 2 Editable Text objects and resize them to fit the image. Rename the top input box to email_input, and set the anchor to the center. Then set the Hint Text to Email. Change the font size to 27 and color to black.
For the 2nd input, rename it to password_input and use the same values for the font size,color, and Anchor. Set the Hint Text to Password and enable the Is Password appearance.
For the buttons add a long 1 underneath the password input. Then add 2 smaller ones under the long button. Make sure to anchor all the buttons to the center.
Rename the long one, login_button, the small one on the left to reset_button, and the one on the right to create_button.
Now drag a Text object into each of the buttons to label them. The long one is Login. The one on the left is Reset, and the one on the right is Create.
Compile, save, and run the app again to make sure it is still working.
Now, we’ll do the same for the Reset_Password_Page.
Reset Password Widget
In the Content Drawer, open the Reset_Password_Page widget.
Add a canvas and make sure the size is 1280 x 720.
Then add the Reset_Password_Page image.
Add an Editable Text field and set its font-size to 27 and color to black. Set the hint to Email and name to email_input.
Add 2 buttons underneath the input box.
Label the button on the top to Reset and name it to reset_button. Then set the label to Cancel for the one at the bottom and rename it cancel_button.
We’ll also need to anchor all the elements to the center as well.
That’s all for the Reset page. We just need to do one more widget for the login screen.
Create Account Widget
Open the Create_Account_Page widget. Then add the canvas and image for it. Fill the page to make it look like mine.
Rename the email input to email_input, the password input to password_input, the cancel button to cancel_button, and the create button to create_button.
Make sure all the elements are anchor to the center.
That’s all for the login screen widgets, we can begin working on the logic and connect everything. We’ll start by adding a click event to the Create button in the login page so we can click on it to display the Create_Account_Page.
Compile and save the changes.
Displaying the Create Account Widget
Open the Login_Page widget blueprint and go to the Graph. Grab a reference to the Create Button and bind it with a On Click event.
Then use the Create Widget node to create the Create_Account_Page widget and add it to the Viewport when we click on the button.
Compile, save, and run the app. If we click on the create button now, the Create_Account_Page should appear.
Create Account Logic with the Firebase Blueprint Plugin Library
Now go into the Create_Account_Page widget graph. Grab a reference to the Create button then bind it with a On Click event.
To create an account, use the Create Account with Email and Password node from the Firebase Blueprint Plugin. Then grab a reference to the Email and Password inputs and connect the values with the pins in the node.
To create the callbacks, click and hold on the pin, then drag on an empty spot. Select “Add Event” then “Add Custom Event.”
For the On Success callback, print out a message telling us that the account is successfully created. For On Fail, print out the error message.
If we compile, save, and run the app, we should be able to use the Create_Account_Page to create the account.
Navigate to the Create_Account_Page, then enter an email and password. If we click Create, we should get a message telling us that the account is created, and the screen will change since it automatically logs us in when the account is created.
If we restart the app, you can see that the game screen will be shown. That’s because the login session is saved when we sign in, so we need to log out to go back to the login screen.
Logging Out
Open the Content Drawer and go into the Game_Widget. Add canvas and a button. Then label it Logout and rename it to logout_button.
Compile, save, and open the Default game blueprint.
Add the Event Begin Play node and get the player controller. Then set Show Cursor to true so we can interact with the screen.
Now add the Game_Widget to the view.
Compile, save, and run the app. The logout button should appear.
Go back to the Game_Widget Graph and grab a reference to the logout button. Then add a click event to it and call the Sign Out node from the plugin.
If we compile, save, run the app again and click on the Logout button, the login screen should appear.
Logging In
Now that we have an account, we can define the logic to sign in. Go back to the Login_Page widget graph.
Grab a reference to the login_button and attach a click event to it.
Now call the Sign In With Email and Password node and add the callbacks.
For the email and password, we’ll use the values from the inputs.
Compile, save, and run the app.
If we enter the credentials for the account and hit the Login button, we should transition to the Game screen. Now let’s put in the logic to reset the account password.
Reset Password
Open the Reset_Password_Page widget and go to the Graph.
Grab a reference to the Reset button. Then add a click event to it.
To reset the password, call the Send Password Reset Email.
Add the callbacks and pass in the text from the email_input textbox.
Compile and save the changes.
Go back to the Login_Page widget and get the reference to the reset button. Add a click event to it.
Then call Create Widget and create the Reset_Password_Page widget. Lastly, add it to the viewport.
Compile, save, and run the app.
Navigate to the Reset password page and enter the email for the account.
If we click on the reset button, we should get an email with instructions to reset the password.
That’s all for the login system portion of the tutorial. Thanks for reading.
Cleaning Up
For the last section, we’ll add the logic to cancel each page so we can go back if we do not want to do anything.
Go to the Create_Account_Page Graph. Grab a reference to the Cancel button and add a click event to it.
To go back, just use the Remove from Parent node. Compile and save the changes.
Now go to the Reset_Password_Page widget graph and do the same. Get the reference to the cancel button. Add click event. Call Remove from Parent.
Compile, save, and run the app.
If we navigate to the Create account page and hit cancel, we’ll go back. Now navigate to the Reset Password page and hit cancel, it’ll go back as well.
