If you want your users to register to use your web app, adding a signup and login process is pretty straightforward in Code2.
Depending on your preference, you can give your users several signup options.
Sign up using their email
Or sign up with their social account, e.g., by using their Google or Linkedin account.
Creating Your Signup and Login Pages
When you create a new app in Code2, User Management is enabled by default.
This means that when your app is created, the signup and login template pages are automatically generated. If you click on the Pages icon in the editor, you'll see an "auth" folder in the page list.
If you click on this folder, inside, you'll notice all the pages associated with the signup and login process are included. For example, in addition to the Signup and Login pages, there is also a "Forgot Password" and "Reset Password" page.
These pages are templates you can fully modify, customize and design just like any other page in Code2. However, all the logic and connections between these pages are built-in by default, so you don't have to worry about managing the interaction between these pages during the signup process.
So most of the work is already done for us, but to see these pages in action, we have to connect them to the rest of our app.
Sending Emails to your users
In order for your users to signup using their emails, you have to add a way for your app to send them emails first. At the minimum, you need this in order to verify their email account and in order for your users to be able to reset their password.
One simple way Code2 lets you do this is by connecting your web app to your SendGrid account. If you are unfamiliar with SendGrid, SendGrid is a service that lets you send emails to your users and specializes in giving you ways to customize the process.
Once you create your SendGrid account, enabling your user signup process in Code2 can be done in a couple of simple steps.
Activating Email Signup
If you click on the Gear/Settings icon on the editor, you will see a "Secrets" tab in the settings. In this tab, you can add your SendGrid API Key and Sender email, which is the email that is registered in SendGrid for sending emails to your users. There are separate fields for "Production" and "Development," allowing you to link the app you are developing and testing to a different SendGrid account than your published live app that your users are using.
After saving this information, you can now test if the email signup process works. You can go back to the Signup Page in the "auth" folder and click on the App Preview, which will open the Signup page in a new browser tab. To test the page, you can signup with a regular email by filling in the required info. After clicking the Signup button, you should receive an email asking you to verify the account. If you don't see the email in your inbox, you might need to check the spam folder.
The email you receive will look like a basic unformatted message, which is ok for now because we are just checking to see if the signup process works.
If you click on the verification link, you should be directed to a page notifying you that your account has been verified. From there, you can continue to the login page and enter the email you signed up with. At this point, you should have been able to log in to the app. You can go ahead and preview and test the "Forgot Password" page as well, which should also work as expected at this stage.
Sending Nice-looking Customized Emails
SendGrid allows you to customize your emails for different use cases, so you can create different email templates based on your specific needs. Currently, in Sendgrid, if you create an email template for sending an email verification link to your users, as well as a template for resetting their password, you can tie both of these to your app in Code2.
Each template in SendGrid comes with a Template ID. If you go back to the Secrets tab settings in Code2, you'll notice that there are parameters for the verification and reset password emails.
Templates in SendGrid come with template IDs.
If you enter and save your corresponding SendGrid Template IDs for these settings, your users will receive the fancier email templates you have created in SendGrid.
When you are creating your templates in SendGrid, you can use the following variables to customize your emails. Using these with the double curly brackets in your template lets SendGrid know to treat them as variables.
For the verification email:
For the reset password email:
Adding Social Login
Depending on your preference, you might want to let your users log in with existing services they already use.
Code2 currently supports the following social login options:
Adding a Google Login Option
First, you need to create a client ID and secrets in Google. You can get information on how to do this here, specifically in the credentials and authorization token sections. Alternatively, you can take a look at videos like this or more recent ones with the same or similar titles.
The next step is going to the Google API Console and entering this URL into the Authorized Redirect field:
After you have completed these steps, you can go ahead and enter the Google client ID, and secret in the same Secrets tab setting shown in the previous section.
After saving these settings, go back to the Signup page and click on App Preview to test the Google login feature. It should now work as expected.
Adding a Linkedin Login Option
The steps for Linkedin are almost identical to the ones for Google. Again, you first need to create a client ID and client secret in the Linkedin Development Platform. You can get info on how to do that here.
Then you need to fill the Authorized redirect URL with this value:
The last step is entering and saving the client ID and secret for Linkedin in the Secrets tab settings.
When you go back to the Signup page and preview your app, the Linkedin login button should work as expected.
Connecting your Signup Process to your Existing Pages
After you have completed adding the signup options described in the previous sections, the process should work as expected when previewing your app from the Signup page. However, We need to adjust a couple of more things for your signup process to work completely in sync with your app.
Redirecting to your "Home Page" after Signing In
If you've set up your signup process, you'll notice that when you sign in, you automatically see a page that says "Hello."
As you'll guess, this is not a page you've created but a default page in the "auth" folder ("Authorized Page").
So how do you make it so that one of your existing pages is displayed after login?
Well, you can go to the Login page in the "auth" folder and click on the Login button on the page. If you then go to the Flows panel, you'll notice there's an action that is defined there that specifies which page to load after the user has logged in. By default, it's set to the "Authorized Page."
Instead, you can change it to one of your existing app pages. If you've created a blank app, you can test it by setting it to the "Welcome" page. Now when a user logs in, it will automatically go to the page you have specified.
Adding a Sign out button
If you've replaced the "Authorized Page" with one of your existing app pages, you'll notice there is no sign-out option available to your user.
When you navigate to the "Authorized Page" in the auth folder, you can find an example of a sign-out button there. If you want, you can copy the sign-out button on that page and paste it into your existing pages.
What may be more ideal is if you add the sign-out button to the navigation menu that is by default displayed on every page. You can customize the navigation menu by going to the "system" folder in the Page List and clicking on the "Application Layout" page. By pasting the sign-out button inside the navigation menu there, you can have the sign-out option available on every page.
Feel free to customize it to look better. The way to do this is also shown at the end of this how-to video
Adding Page Restrictions
Up until this point, if you preview your app from your existing app pages, you'll notice that a user can view these pages without signing in.
So if the user is not signed in, how do we redirect to the Signup page? It's rather easy, actually.
Every page has an "Authenticated Page" toggle in its settings. All you have to do is enable this option for the page.
Once this is done, if you click on App Preview, you'll notice that the page redirects to the Signup Page if the user is not already signed in.
That's it; you're all set!