Authentik - Branding/Customization (updated)

Summary

Highlights

• Discover how to set up domain-specific customizations in Authentik 🌐.
• Learn to upload and manage media through FileZilla for seamless branding 📂.
• Watch how to effectively edit logo and favicon settings in Authentik 📸.
• Get tips on updating global settings to affect all users and maintain brand identity 👍.
• Understand how to adjust layout settings to personalize your login experience 🛠️.
• Ensure consistent branding by synchronizing customization across all flows 🔄.
• Explore the feature of combining username and password prompts into a single page 🔍.
• Find out how to handle missing default flows during customization promptly ⏱️.

Key Takeaways

• Learn to customize your Authentik interface with fun branding options 🎨.
• Utilize tools like FileZilla to manage media files efficiently 🚀.
• Make global changes through the system settings to maintain consistency 🌍.
• Customize your flow settings to enhance your user experience 🔄.
• Personalize loaded applications with icons and descriptions to make navigation a breeze 🖼️.

Overview

Chapters

• 00:00 - 01:00: Introduction and Setup In this introductory chapter, the speaker welcomes viewers to the channel and outlines the focus of the video on branding. The video is made in collaboration with Authentic Security and aims to explain how to customize the appearance of brands specifically through Authentic. The speaker reassures that even if not a designer, viewers can expect to learn the basics to start customizing their domains. The prerequisite mentioned is having domains set up with proper NS records.
• 01:00 - 02:00: Uploading Media Files The chapter titled 'Uploading Media Files' delves into the prerequisites and steps for uploading media files within a Docker setup. It starts by emphasizing the importance of ensuring that the media folder is bind mounted in the Docker Compose file for accessibility. This setup is crucial for later processes that involve file uploading. The chapter also provides detailed instructions on moving files into the media directory using specific command syntax. The command 'WG' is highlighted, with 'D' as an output parameter. Instructions are given for naming the file either within the current directory or by specifying the full path and file name.
• 02:00 - 03:00: Creating and Editing Brands This chapter provides a guide on creating and editing brands using secure file transfer protocol clients. The chapter mentions that users can either create or download custom backgrounds, application icons, and favicon files. The narrator uses Zill client in the example but notes that Windows SCP or any SFTP-capable client can be used. Additionally, there are links provided for tools and explanations of brands from Authentics, which will be helpful for the readers who want to delve deeper into the subject.
• 03:00 - 04:00: Customizing Brand Settings In the chapter titled 'Customizing Brand Settings,' the process of managing media files and configuring brand settings in an authentic instance is discussed. The narrator instructs on using Filezilla to connect to a media directory, and options for organizing files either through drag and drop or by creating custom folders. The steps then transition to navigating the authentic instance's admin interface as an administrator, expanding the 'system' section, and accessing brand settings.
• 04:00 - 05:00: Avatar and Footer Links Customization This chapter covers the process of creating a custom brand for your domain, specifically focusing on using DNS records and a reverse proxy. It demonstrates how to establish a domain in the system and check its default authentication flow. Further customization of the brand is hinted at as the chapter transitions to personalizing features.
• 05:00 - 06:00: Message and Background Updates This chapter discusses how to update the message and background settings in the admin interface for a specific brand that has been created. The steps include editing the brand settings by changing the title to a suitable name (e.g., 'Sweet Shop Creations') and updating the logo and favicon by entering their respective paths and file names. The process involves using an SFTP client to verify these details if needed before clicking the update button.
• 06:00 - 07:00: Testing and Troubleshooting The chapter 'Testing and Troubleshooting' covers a practical guide on modifying the visual elements of a web interface. This includes updating the favicon, main logo, and parts of the wording on a browser tab. The chapter emphasizes checking these changes by refreshing the browser and highlights that these alterations also reflect on the login page. It then transitions to the backend, demonstrating how to make global changes via the admin interface. A key point is the customization of avatars, which signify user profiles, accessible through the settings menu.
• 09:00 - 10:00: Customizing Applications The chapter titled 'Customizing Applications' discusses various options for changing avatars. Users are instructed to type in their choices separated by a comma. The available options include 'none', 'gravitar', which is a free service linked with your email to upload a custom profile picture, and 'initials', where the avatar will default to your initials in a colored format. The transcript includes a personal note from the speaker regarding their profile setup.
• 13:00 - 14:00: Conclusion The concluding chapter emphasizes the customization options available, such as uploading custom avatars and modifying footer links. It guides the reader on selecting URLs for images hosted externally and formatting links in either JSON or YAML, providing examples for clarity.

Authentik - Branding/Customization (updated) Transcription

• 00:00 - 00:30 hi and welcome back to the channel in this video I'll be going over branding more specifically how to customize the look of your Brands as authentic allows you the ability to customize each domain separately also this video is made in collaboration with authentic security now I'm not the best designer but hopefully this video reveals the basics where you can let your creativity take over so let's get started first this video assumes that you have your domain or domains already set up with proper NS records both at
• 00:30 - 01:00 your registar and in your preferred reverse proxy also be sure that you have your media folder bind mounted in your Docker compost file so that it is accessible we'll need this later to be able to upload files to speaking of uploading files you can get the files you want into your media directory by using this command where WG is the command and D is the output parameter followed by what you want to name the file if you are in the current working directory otherwise type the full path and file name and
• 01:00 - 01:30 lastly the address where the file is being downloaded from though in this example I'll be using the file Zill client you can also use win SCP if you're on Windows or any other client with SFTP or secure file transfer protocol capabilities links to these tools and Authentics explanation of Brands will be linked in the description below if you haven't already create or download your custom backgrounds application icons and favicon files then launch and connect to your authentic host with your preferred SS FTP client again I'm using
• 01:30 - 02:00 filezilla once connected navigate to your media folder that you've bind mounted for authentic from here just drag and drop your files from your local system or do as I am and create a custom folder if you prefer Now navigate to your authentic instance and log in as an administrator click on admin interface then click on system to expand it click brands and click
• 02:00 - 02:30 create for the domain enter the domain you've established in your DNS records and reverse proxy for me that is o. sopc creations.com and click create we'll now check to see just what simply creating this brand does by opening a new tab and navigating to the domain address we entered when new brands are created they will load the default authentication flow as seen here now let's get to custom iing jump back
• 02:30 - 03:00 to the admin interface Tab and click edit for the brand we just created under brand settings change the title to something suitable for your brand I'll enter Sweet Shop Creations for logo type in the path and file name to your logo file if you don't remember you can always go back to your SFTP client to double check this info and do the same for the favicon file and click update now let's jump back back to our
• 03:00 - 03:30 new brands Tab and refresh the page to see our changes as you can see the favicon and part of the wording in our browser tab have updated accordingly as well as the main logo for the login page now we'll jump back to our admin interface Tab and click on settings under the system menu the disclaimer here is that any changes we make here will be applied globally so for further customization we can change our avatars which is the icon denoting your user profile you can see in settings the
• 03:30 - 04:00 avatars can be changed with the following list of options just type in your choices separated by a comma so the choices are none gravitar which is what I'll be using it's a free service used with your email where you can upload a custom profile picture I've already signed up but disabled my profile so let me go back and enable it really quick initials which as default your avatar will be your initial in a colored
• 04:00 - 04:30 Circle as displayed here any URL to an image hosted on another server any of these placeholders or an attribute path with the file field to allow users to upload custom avatars for themselves the next thing we can customize are the footer links and those are the text links you see near the bottom of the page as seen here just be sure to type your links in as formatted in the Json example here or in the yaml format as I'll be doing Dash space space href colon space
• 04:30 - 05:00 followed by the URL address of your choice on the next line hit space twice and type Name colon space followed by what you want the text to say for your link above then just repeat this process for however many links you want displayed and click save now if you click refresh here within the admin interface notice my avatar is updated to whatever I uploaded with gravitar
• 05:00 - 05:30 if we go back to the tab with our new brand and click refresh notice the footer links we created are now populated down at the bottom of the page these footer links would also be an awesome way to list the links to all your other brands I'll quickly click each one to show that they redirect to their destinations as intended notice the welcome message still says welcome to authentic let's change this to be more appropriate for our brand by modifying the respective below click back to the admin interface
• 05:30 - 06:00 Tab and click on flows and stages to expand it and click on flows find the default authentication flow and click edit change the name to what you prefer I'll change mine to Sweet Shop creations and do the same for the title this is what is displayed as the message on the login screen so for me I'll just change the word authentic to Sweet Shop cre
• 06:00 - 06:30 Creations next update the slug I'll just remove the word default and replace it with swe shop Creations I use the password manager so for the best compatibility I'll click and expand Behavior settings and enable compatibility mode then scroll down and click to expand appearance settings change the layout to your preference I'll demonstrate what each layout looks like in a little bit but for now I will change the background by
• 06:30 - 07:00 clicking on choose file a window will pop up allowing you to select a background image from your local system choose the file and click on open to select it then click on update to apply the changes and upload the background the reason we're updating all this is to make the flow unique to this brand otherwise if we leave the name and slug as the defaults for example any other flow using the default will share any layout or background modifications anyways to see the changes we just made
• 07:00 - 07:30 load your new brand in a private or incognito window or close the current tab you currently have open for it and relaunch it as you can see the custom background has been applied and the message in both the browser Tab and the main login prompt area have updated to say welcome to Sweet Shop Creations I'll now jump back to the admin interface and cycle through the different layout options for our new custom flow and refreshing the tab after each change
• 07:30 - 08:00 here is what content left would look like with the login prompt to the left of center and footer links right of Center here is content right just the opposite of content left here is sidebar left the entire left corner of the page is the login prompt with the footer Links at the bottom of this
• 08:00 - 08:30 and finally here is sidebar right the opposite of sidebar left for this particular design I prefer and will change the layout back to Stacked
• 08:30 - 09:00 now let's log in and see what else has changed as you can see my avatar from gravatar is loaded from the email address associated with my username once in the application dashboard you'll notice our custom logo is now in the header and again our custom avatar is loaded clicking on admin interface we'll see our custom logo is also populated at the top of the sidebar menu
• 09:00 - 09:30 men and the custom avatar at the bottom left basically anywhere your profile is displayed by authentic now let's go ahead and log out uhoh did you see that momentary change in the background we don't want that it messes with the whole look and feel of the flow pun not intended so let's fix that by jumping back to admin interface clicking on flows then finding and clicking edit on the default invalidation flow we'll want to custom this as we did the default
• 09:30 - 10:00 authentication flow change the name to your preference do the same for the title as well as the slug next click on appearance setting to make the logout experience more cohesive be sure to choose the same layout and background as was used for our customized authentication flow and click update now let's test it out I'll go ahead and close out the current tabs and
• 10:00 - 10:30 relaunch the brand we've been working on I'll then log in really quick and log out just as quick you'll notice my background stayed consistent this time so you'll want to take these same steps in any other flows you incorporate that may cause an inconsistency the next thing I'll show is how to get the username and password prompt on the same page if you prefer not having to load a second page for the password
• 10:30 - 11:00 prompt jump back to the admin interface click flows if not already there and find and click on our Brand's custom authentication flow not edit but the flow itself next click on stage bindings find the default authentication identification stage and click on edit stage under password Sage click on the field that has the dashed line and choose default authentication password or your own custom password stage if
• 11:00 - 11:30 you've created one and click on update then tick the box next to the default authentication password stage and click delete and click delete once more in the pop-up window this removes that second page password prompt Let's test this out by closing the Brand's currently open Tab and launching an incognito window and then navigate to the Brand's address there we have it the username and password prompt are on the same page
• 11:30 - 12:00 logging in we'll see that we're no longer presented with a second page prompting for a password leaving us on the application dashboard speaking of application dashboard let's run through the process of customizing any of your loaded applications I'll use image in this example we'll give it an icon and description first click on more details then click on edit under the overview tab for image click on edit
• 12:00 - 12:30 click on UI settings to expand it next for Icon click on choose file and just as we did for selecting our custom background select the icon image file for our application optionally enter the Publisher's name and enter a brief description of the application finally click update once more let's test us out by launching an incognito window and navigating to our customized Brands address then proceed to log
• 12:30 - 13:00 in once the application dashboard is loaded we can see that image now has an icon and clicking more detail shows the publisher we entered as well as the description underneath it oh one other thing since we changed a couple of the default flows they momentarily no longer exist if you're trying to crank out multiple customized Brands back toback now they do eventually cycle and come back but if they don't or you need them right away just click back to the admin interface click and expand
• 13:00 - 13:30 customization click on blueprints find the default flows that you are missing and immediately need and under actions click on apply which looks like the play button now if you click back on flows we'll see our default authentication flows back as well as our default invalidation flow used for logging out I hope you found this video useful and if so please click that like button and share also don't forget to subscribe to the channel for any other future
• 13:30 - 14:00 videos thanks for watching