ZITADEL in the Classroom: A Look at smartive's and OST's Advanced Frontend Engineering Course

July 27, 2023

Developer Advocate

case_studies

Key Outcomes

Leveraging Real-World Tools for Practical Learning: The CAS Frontend Engineering Advanced course run by smartive uses ZITADEL, an open-source Identity and Access Management platform, providing students with hands-on experience in working with industry-grade tools. This exposure gives students practical understanding and skills applicable to their professional careers, making their learning experience highly relevant and impactful.
Simplified Authentication and Security: ZITADEL's straightforward setup and comprehensive free tier made it an ideal choice for managing the authentication and security of the API used in the course. This ease of use allowed students to focus more on learning advanced web development topics and less on configuring security tools, enhancing the overall efficacy of the course.
Effective Management of User Access: With ZITADEL, smartive was able to manage and control user access to the course's shared API effectively. Despite accessing a shared resource, ZITADEL's configuration allowed each student to have a personalized experience. Students were expected to create their own ZITADEL account to access the API and set up authentication for their individual front-end applications.

Introduction

smartive, a leading IT services company, conducts the Certificate of Advanced Studies (CAS) Frontend Engineering Advanced Course at the Eastern Switzerland University of Applied Sciences (OST). The collaboration emerged from a longstanding relationship between smartive and OST, as several smartive team members are alumni of the university and have previously been invited to deliver guest lectures. The opportunity for smartive to take a lead role in the course materialized when OST invited them to design and conduct an entire course.

About The Eastern Switzerland University of Applied Sciences (OST)

The Eastern Switzerland University of Applied Sciences, also known as OST, is an institution steeped in history, having brought together 170 years of tradition in education and research. Founded by the six cantons of St.Gallen, Schwyz, Glarus, Appenzell Ausserrhoden, Appenzell Innerrhoden, Thurgau, and the Principality of Liechtenstein, OST has positioned itself as an essential educational hub for Eastern Switzerland and Liechtenstein.

OST is a public institution, independent in its functioning, characterized by its own legal personality and the right to self-administration. At its heart, OST is a cooperative venture, sustained by the shared vision and commitment of the various founding regions.

In terms of its impact and reach, OST is a significant player in the region's educational landscape. The university hosts around 3,800 students across six departments, furthers the professional competencies of approximately 1,500 individuals via executive education, and advances the field of academic research with more than 1,000 ongoing research projects.

About smartive

smartive is an IT services company based in German-speaking Switzerland, renowned for its bespoke digital products and comprehensive IT solutions. With a diverse portfolio ranging from startups to the largest employers in Switzerland, including notable clients like Bin, Migros, Schweizerische Eidgenossenschaft, and Frontify, smartive stands as a hallmark of IT innovation and digital transformation.

The company's services span from the conceptualization of an idea to its realization into a live digital entity. Specializing in web apps, APIs, and DevOps, smartive has been setting up brand new products, analyzing existing solutions, and providing ongoing support and development for projects since 2012.

About the Course

The Certificate of Advanced Studies (CAS) Frontend Engineering Advanced Course offered at the OST University is designed for individuals with experience in frontend engineering aiming to progress to a "Senior Frontend Engineer" position. Admission requires a minimum of two years of professional experience in a development team and a recognized tertiary degree. The course spans nine months.

The structure of the course involves the completion of three sub-projects, where students have the opportunity to build a 'Twitter Clone'. This provides practical experience and allows students to demonstrate their ability to independently set goals and develop their projects.

The course delves into Design Systems, offering students an understanding of the fundamentals, how it evolves from Bootstrap, recent developments in CSS, and updates on JavaScript frameworks. Students also gain insights into the areas of Architecture and Cloud DevOps, which include frontend engineering with Next.js, mastering TypeScript/React Hooks, understanding various APIs, managing data and state, and optimizing performance with Progressive Web Applications (PWAs).

A significant component of the course is Cloud DevOps, where students explore frontend security, OpenID Connect (OIDC), Continuous Integration/Continuous Deployment (CI/CD), and concepts of Cloud Native Applications and serverless computing.

About the Students

The course attracts students with a background in computer science or web development. The students' experience levels vary, but most of them possess substantial professional experience in their respective fields. Some students come to the course seeking to update their skills, having used older practices for web development and are keen to learn how to apply modern methodologies.

Professionally, many of these students are already working as front-end engineers. Their experience with programming languages and frameworks is diverse. Some students come with a strong foundation in languages like Java or PHP, while others already have experience with more modern frameworks like Angular or React.

Problem

One of the fundamental aspects of this course is the use of an Identity and Access Management system—a component that is central to a major assignment requiring the development of a NextJS application. The course focuses on teaching students about API access, front-end security, state management, and design tokens among other advanced topics.

Throughout the course, students create a real-world project in a one-to-one context with all the topics covered. An identity and access management provider that supports OpenID Connect (OIDC) must be utilized in the login and security segment, where students learn how OIDC works and how it is implemented in the provider.

Solution

Why smartive picked ZITADEL

smartive chose to incorporate ZITADEL into the course for a multitude of reasons:

Being a free-to-use system, ZITADEL eased potential budget constraints for the course. Compared to its competitors, ZITADEL eliminated the need to negotiate educational agreements or struggle with complex onboarding processes. The fact that smartive had prior experience with ZITADEL was also a contributing factor, as they were familiar with how to navigate and utilize ZITADEL effectively.

Everything the students needed was available right out of the box on the free tier, making it more than sufficient for the course's nine-month duration. This served as an ideal way to showcase OIDC, login, and security operations in a practical setting.

Compared to in-house solutions, ZITADEL presented a clear advantage with its open-source nature. Universities often rely on sophisticated enterprise authentication schemes like Shibboleth, but integrating such a system into the course could have resulted in a considerable amount of work.

How ZITADEL is Used in the Course

ZITADEL is used to facilitate a practical assignment that tasked students with building a web application, specifically a Twitter-like platform named "Mumble." This hands-on approach required ZITADEL primarily for its security features and OIDC part of the course.

In this context, the students' application needed to interact with an API created by smartive, simulating a real-world software development environment. The API underpinned the entirety of Mumble's functionality, managing tasks like creating posts (or 'mumbles'), deleting and liking posts, and following other users. It also facilitated real-time updates of activities on the platform via server-sent events. This approach exemplified an API-first methodology, mirroring ZITADEL's own implementation.

To access and interact with this API, students had to create a ZITADEL account. This process simulated an authentic software development experience, where front-end applications must interact with authenticated APIs securely. Since the API can be hosted as a separate project, students can create their own project for their Mumble application, only needing to specify the API project's resource ID as the audience from their client side. This will allow them to manage their front-ends and redirect URIs independently.

smartive OST Diagram 1 — Figure 1: Use of ZITADEL for User Management and Authentication

Each cohort of students, typically comprising 20 to 25 individuals, is granted access to a ZITADEL instance for the duration of the course. Despite the small class size, ZITADEL is used intensively, generating significant traffic. This hands-on experience with ZITADEL forms a critical part of the learning process, enabling students to familiarize themselves with real-world security solutions.

Learning Curve

The foremost challenge faced by the students was learning how to create a front-end application, specifically, grasping how to implement certain features, such as setting up Proof Key for Code Exchange (PKCE) and redirecting URLs.

However, it is important to note that the learning curve associated with these challenges was somewhat anticipated, given that most students did not have prior experience with comparable technologies.

Future Plans

smartive has clear future plans for the CAS Frontend Engineering Advanced course, aiming primarily to enhance the course content and teaching methodologies. One central focus is the topic of login and security, a crucial aspect of any advanced web development course. This focus won't change, as it forms a core part of the real-world project-based learning approach that the course employs.

The emphasis on OIDC and web application security is expected to persist, as these aspects remain critical in the evolving landscape of web development. The year 2023 and beyond will likely see these topics retaining, if not growing, their importance.

Testimonials

“ZITADEL is the right choice to show students how OIDC works. It adheres to the spec and has a generous free tier such that the students can fiddle around with the system.” - Christoph Bühler, Software Engineer at smartive and Course Lecturer at OST