Frank Costoya

large_ant-rozetsky-io7dX_1EFCg-unsplash.jpg

medium_ant-rozetsky-io7dX_1EFCg-unsplash.jpg

small_ant-rozetsky-io7dX_1EFCg-unsplash.jpg

thumbnail_ant-rozetsky-io7dX_1EFCg-unsplash.jpg

ant-rozetsky-io7dX_1EFCg-unsplash.jpg

Migrating a React-based Sitecore application to Next.js can unlock powerful server-side rendering and modern performance benefits—but it also presents unique challenges. In this post, we dive into how Sitecore’s default component factory generation can unintentionally inflate your rendering list, turning each subcomponent into a standalone element. You’ll learn why this happens and how to implement a custom script that respects your existing folder structure. By doing so, you can keep your code organized, prevent confusion in Sitecore, and ensure a seamless editorial experience.

Migrating from React to Next.js in a Sitecore World: Overcoming the Component Factory Hurdle


**Introduction**

So, I've stumbled upon some extra free time lately—surprising, right? Instead of binging on my backlog of games (which, let’s be honest, is tempting), I’ve decided to take on something a little different. I've been writing my own CMS in a language I’m least familiar with: Go. It’s been a wild ride, and along the way, I decided to experiment with using AI to help me write tests for the service code I’ve written. In this article, I’ll walk you through the ups and downs of using AI for testing and how it helped shape my little CMS project, *CenariusCMS*. Spoiler: I’ve been playing a sort of ping-pong match between AI and myself, and it's been... surprisingly educational.

**A Developer’s Perspective: The CMS and the AI**

Before we get deep into the code, let me clarify a few things. While I’m a senior software engineer (with some solid experience in C#, Python, and TypeScript), I’m still pretty much a novice in Go. So, working on *CenariusCMS*—a headless, API-driven content management system—has been an enlightening personal development project, one that's taught me more than I ever imagined. The kind of learning you get from working on your own project sometimes surpasses what you learn on the job.

Now, why use AI for testing? I didn't set out to test via AI because I wanted to dive into the latest buzzword trends. Nope. I had a practical reason: Go is a new frontier for me, and I wanted some backup while creating tests for my *template service*. And guess what? The AI caught things I didn’t expect, pushing me to rethink and refactor my service code. It’s like having a rubber duck that can also hand you a new test case for your most elusive edge cases.

---

### Diving Into the Code: *Template Service in CenariusCMS*

Here’s where things got interesting. My *template service* handles the creation, retrieval, updating, and deletion of content templates. Here’s a look at part of the service:

```go
package template

import (
	"context"
	"time"

	"github.com/go-playground/validator/v10"
	"github.com/myproject/pkg/models"
	"github.com/myproject/pkg/repositories"
	"go.mongodb.org/mongo-driver/bson/primitive"
)

type TemplateService interface {
	CreateTemplate(ctx context.Context, template *models.Template) error
	GetTemplates(ctx context.Context) ([]models.Template, error)
	GetTemplateByID(ctx context.Context, id primitive.ObjectID) (*models.Template, error)
	GetTemplateByName(ctx context.Context, name string) (*models.Template, error)
	UpdateTemplate(ctx context.Context, id primitive.ObjectID, template *models.Template) error
	DeleteTemplate(ctx context.Context, id primitive.ObjectID) error
}

type templateService struct {
	repository repositories.TemplateRepository
	validate   *validator.Validate
}

func NewTemplateService(templateRepo repositories.TemplateRepository) TemplateService {
	return &templateService{
		repository: templateRepo,
		validate:   validator.New(),
	}
}

// CreateTemplate logic with validation and auto-generated fields
func (s *templateService) CreateTemplate(ctx context.Context, template *models.Template) error {
	template.ID = primitive.NewObjectID()
	now := time.Now().UTC()
	template.CreatedAt = now
	template.UpdatedAt = now

	if err := s.validate.Struct(template); err != nil {
		return err
	}

	return s.repository.CreateTemplate(ctx, template)
}

// Other methods: GetTemplates, UpdateTemplate, DeleteTemplate
```

The service seemed robust, but the key word here is *seemed*. I needed thorough tests to ensure it actually worked as expected—especially when handling all sorts of edge cases that I might overlook, like missing required fields or strange combinations of input data. That’s where AI entered the picture.

---

### AI: Not a Magic Wand, But a Powerful Tool

I was genuinely curious: How would AI-generated tests fare against this service? Could it handle all the nitty-gritty details like validation errors, missing fields, and handling MongoDB IDs? The initial results were pretty good, actually—about 75% of what I needed. Here’s a basic structure of a test case it generated:

```go
func (suite *TemplateServiceTestSuite) TestCreateTemplate() {
	template := models.Template{
		Name: "ServiceTestTemplate",
		Fields: []models.FieldDefinition{
			{Name: "Title", Type: "text", Required: true},
			{Name: "Description", Type: "longtext", Required: false, Default: "Default Description"},
		},
	}

	err := suite.TemplateService.CreateTemplate(context.Background(), &template)
	assert.NoError(suite.T(), err, "Expected no error on template creation")

	insertedTemplate, err := suite.TemplateService.GetTemplateByID(context.Background(), template.ID)
	assert.NoError(suite.T(), err, "Expected no error retrieving the template")
	assert.NotNil(suite.T(), insertedTemplate, "Expected the inserted template to exist")
}
```

This worked! But… there was more to it than just running the tests AI created.

### The AI Ping-Pong: Back and Forth with Edge Cases

Let’s be clear: AI doesn’t replace human thinking, especially when it comes to the nuances of code. The initial test batch exposed some flaws in my *template service*—for example, missing validations and improper handling of empty fields. But after fixing these issues, I had to rethink the tests. The AI didn’t generate every edge case, so I stepped in to fill the gaps.

Once I manually added some extra edge cases, I bounced it back to the AI. It came up with more scenarios I hadn’t considered, like testing how the service behaves when creating templates with duplicate names or missing field types. Check this out:

```go
func (suite *TemplateServiceTestSuite) TestCreateTemplateMissingName() {
	invalidTemplate := models.Template{
		Fields: []models.FieldDefinition{
			{Name: "Title", Type: "text", Required: true},
		},
	}

	err := suite.TemplateService.CreateTemplate(context.Background(), &invalidTemplate)
	assert.Error(suite.T(), err, "Expected validation error for missing 'Name'")
}
```

By working this way, I strengthened both my code and test coverage, discovering scenarios that would have slipped by if I were flying solo.

---

### The AI Brain Farts: When Context Gets Lost

One thing I learned quickly: AI sometimes loses track of the context, especially when you work on complex prompts or multi-step problems. For example, I’d ask the AI to generate tests for a specific scenario, and it would circle back to things we’d already solved, like revalidating fields that had already been tested. At one point, I had to tell the AI to “stop hallucinating” and just provide simple implementations without rehashing old issues.

Here's a moment when the AI went off-track:

```go
// After already testing for valid field types...
func (suite *TemplateServiceTestSuite) TestUpdateTemplateWithInvalidType() {
	// It wanted to test invalid types again, which was redundant
	updatedTemplate := models.Template{
		Fields: []models.FieldDefinition{
			{Name: "Content", Type: "invalid_type", Required: true},
		},
	}

	err := suite.TemplateService.UpdateTemplate(context.Background(), template.ID, &updatedTemplate)
	assert.Error(suite.T(), err, "Expected validation error for invalid field type")
}
```

While the redundancy was a bit annoying, telling the AI to keep it brief and to the point helped manage the noise. You can still extract valuable test cases from the AI; just know it requires a little extra hand-holding.

---

### The Pros of Using AI for Testing

**1. Speed and Efficiency:**
AI-generated tests gave me a great starting point quickly. Instead of writing boilerplate test cases myself, the AI covered much of the basic structure, letting me focus on refining the service code and edge cases.

**2. Idea Generator:**
There were moments when the AI suggested test cases that I hadn’t thought of. These surprise scenarios helped me anticipate issues earlier, such as handling duplicate templates or invalid data types.

**3. Code Cleanup:**
The AI refactored my tests at one point, consolidating multiple test cases into one. This not only made the test suite cleaner but also easier to maintain. It felt like having a second pair of eyes on the code—sometimes, the AI pointed out patterns that were ripe for consolidation.

---

### The Cons of Using AI for Testing

**1. Context Loss:**
The AI struggled with remembering the full scope of the project, especially when it came to more nuanced logic. I had to regularly remind it not to repeat old tests, which ate into the time I saved by using it.

**2. Lack of Deep Understanding:**
While AI can generate the “what” of tests, it doesn’t always grasp the “why” behind certain decisions. This meant I had to carefully review and tweak most AI-generated tests to ensure they aligned with the service’s true functionality.

**3. Prompt Tuning:**
Getting the AI to generate exactly what I needed required multiple iterations and prompt refinements. It’s not a set-it-and-forget-it solution—more like a collaborative process where you have to guide it.

---

### Conclusion: The Sweet Spot Between AI and Human

Using AI for testing isn’t a magic solution, but it’s a powerful tool. It helped me accelerate the testing process for *CenariusCMS*, allowing me to cover more cases than I probably would have on my own. However, it’s not perfect. You still have to think critically about your test cases, revise AI-generated output, and, sometimes, fill in gaps where AI falls short. AI can handle the boilerplate and suggest unexpected edge cases, but human oversight is essential to ensure the tests align with real-world scenarios. In the end, the combination of AI speed and human intuition creates a balance that can improve both your code and your development process.



medium_Screenshot 2024-10-12 at 10.58.19 AM.png

small_Screenshot 2024-10-12 at 10.58.19 AM.png

thumbnail_Screenshot 2024-10-12 at 10.58.19 AM.png

Screenshot 2024-10-12 at 10.58.19 AM.png

In this article, we explore how AI assisted in writing tests for his Go-based CMS project, CenariusCMS. While AI isn’t flawless, it helped speed up the testing process and uncovered edge cases that hadn't been considered. The article delves into the benefits and challenges of using AI for testing, highlighting its ability to assist without replacing human intuition.

Pros and Cons of Using AI for Testing: A Developer's Journey with CenariusCMS

_This article was originally written for my agency, Imarc. See the original post_ [here](https://www.imarc.com/blog/engineering-spotlight-building-a-headless-wordpress-site).

Staying current with the latest technologies allows our team to offer cutting-edge solutions to our clients but also ensures our engineers remain engaged and proficient in modern development practices. By continuously refining our skills, we can tackle new challenges with confidence and creativity, ultimately delivering superior products and services.

One of our latest practice projects, Rentaly, showcases a headless WordPress build. This project exemplifies our commitment to keeping our skills sharp, a crucial choice for any digital agency. Let’s dive into why we chose to build a headless WordPress site, how the build went, and some of the tools we used to make it come to life.

## Why go headless with WordPress?

Choosing a headless WordPress setup can have numerous advantages, making it a compelling option for many organizations. Here are the key benefits and considerations.

### Flexibility & freedom

A headless WordPress setup separates the back-end (content management) from the front-end (presentation). This decoupling allows developers to use any front-end technology, such as React, Vue, or in our case, Next.js.

This flexibility is particularly beneficial if your team is more comfortable with modern JavaScript frameworks other than with PHP. For example, if your team already excels in JavaScript, leveraging their expertise with a headless setup can be a strategic move, enhancing productivity and creativity.

### SEO & performance

Headless WordPress setups can significantly boost page speed and SEO rankings. By leveraging static site generation (SSG) and server-side rendering (SSR), content can be delivered faster, resulting in better user experiences and improved search engine visibility.

In today's digital landscape, where speed and performance directly impact user retention and engagement, these enhancements can provide a substantial competitive edge.

### Scalability

Headless architectures can handle high traffic volume more efficiently. By using modern frameworks and cloud services, you can scale your application seamlessly as your audience grows.

This scalability is crucial for businesses expecting rapid growth or experiencing fluctuating traffic patterns. This type of setup allows for smoother scaling operations without compromising performance or user experience.

### When to consider going headless

The decision to transition to a headless WordPress setup should be based on your organization's specific needs and capabilities. Here are some scenarios where going headless makes sense:

**Skill set alignment**

If your team is knowledgeable about JavaScript frameworks like React or Next.js but lacks deep PHP expertise, transitioning to a headless setup can be a strategic move.

**Need for scalability**

When your website requires high scalability and performance, headless architecture can provide the necessary infrastructure to support rapid growth.

**SEO & speed optimization**

If page speed and SEO are critical for your business, a headless setup can help you achieve higher performance metrics.

### When not to go headless

It's also essential to recognize when a headless approach might not be the best fit. Implementing a headless WordPress setup can introduce additional complexity and overhead. It requires separate hosting for the back-end and front-end, as well as additional development and maintenance efforts.

If your current setup is meeting your needs and you lack the resources to manage a headless environment, it may not be the right time to transition. Evaluating your organization's capabilities and long-term goals is crucial before making the switch. Unsure? [Let us help](https://www.imarc.com/contact) you decide if headless WordPress is right for you.

## Our technical approach

For our Rentaly demo project, we used Pantheon to host the WordPress back-end and Vercel to host the Next.js front-end. This setup leverages several plugins and tools to create a seamless integration between the two platforms.

### Back-end setup

The back-end setup involved installing and configuring various tools to ensure smooth operation. We used OPS to manage our local WordPress environment and sync it with Pantheon for production. Essential plugins like Advanced Custom Fields Pro (ACF Pro) and WPGraphQL were installed to enhance flexibility and data querying capabilities.

Detailed setup instructions can be found in our [GitHub repository](https://github.com/imarc/headless-wp).

### Front-end setup with Faust.js & Next.js

On the front-end, we utilized Faust.js, a powerful framework built on top of Next.js, to create a seamless headless WordPress experience. Faust.js leverages Next.js's static site generation capabilities, enhancing performance and SEO by serving static HTML files. The setup process involves configuring environment variables, installing dependencies, and starting the development server.

For a comprehensive guide, refer to our [Faust.js documentation](https://github.com/imarc/headless-wp/blob/main/docs/faust.md).

### Key plugins & tools

**FaustWP**

Bridges WordPress and Next.js, allowing WordPress to serve as a headless CMS.

**ACF Pro**

Enhances the flexibility of content management by allowing the creation of custom fields.

**WPGraphQL**

Exposes a GraphQL API for WordPress, enabling efficient data querying.

**Custom plugin: Rentaly blocks**

Provides custom blocks for rental-related content, mapped to corresponding React components in the front-end. [See our plugin code here](https://github.com/imarc/headless-wp/tree/main/wordpress/wp-content/plugins/rentaly-blocks).

–

At Imarc, we are committed to delivering top-notch solutions and continuously refining our skills. Our headless WordPress build with Rentaly exemplifies our dedication to leveraging modern technologies for enhanced performance, scalability, and flexibility. For business leaders, this approach can offer significant benefits in terms of SEO, speed, and scalability. For engineers, it presents an exciting opportunity to work with cutting-edge tools and frameworks.

By embracing headless architectures, we ensure that we are not only meeting the current needs of our clients but also preparing for future challenges with confidence and creativity. Whether you are considering a headless transition or looking to explore the technical aspects of such a setup, we are always happy to talk shop. Feel free to [reach out to us](https://www.imarc.com/contact) for more information or visit our [GitHub repository](https://github.com/imarc/headless-wp) for a 360-degree view of the technical details.

large_headless-wp-blog-hero.jpg

medium_headless-wp-blog-hero.jpg

small_headless-wp-blog-hero.jpg

thumbnail_headless-wp-blog-hero.jpg

headless-wp-blog-hero.jpg

Learn why our development team chose to build a headless WordPress demo site as well as the technical ins and outs of how it came to life.



Engineering spotlight: Building a headless WordPress site

_This article was originally written for my agency, Imarc. See the original post_ [here](https://www.imarc.com/blog/in-the-trenches-with-new-sitecore-features).

In today's digital age, personalized web experiences have transitioned from a mere trend to a fundamental strategy for brands striving to connect deeply with their audiences. This strategy transcends the basic act of addressing users by name, aiming instead to accurately tailor content and experiences to match individual preferences, behaviors, and needs. At the peak of this transformative movement are innovative platforms like [Sitecore's Customer Data Platform (CDP)](https://www.getfishtank.com/sitecore-cms/sitecore-cdp) and [Sitecore Personalize](https://www.sitecore.com/products/personalize), key components of the [Sitecore Content Cloud](https://www.sitecore.com/products/content-cloud) suite.

These sophisticated tools empower businesses to scale personalized experiences effectively, harnessing the collective power of data analytics, machine learning, and omnichannel delivery. This article will delve into the crucial role of personalized web experiences, the underlying principles of personalization, and the significant advantages that Sitecore features offer in crafting these experiences.

### The critical value of personalized web experiences

The significance of personalization within web experiences is profound, with the potential to dramatically improve user engagement. By strategically presenting the right content at the right time, companies can forge deeper connections with their audience, leading them through a uniquely tailored and rewarding journey. Such personalized interactions increase time on site and engagement rates but also boost conversion rates, underscoring the power of personalization in transforming digital experiences.

### Exploring the fundamentals of personalization

Personalization involves the intricate process of creating customized interactions and content for users by leveraging insights into their preferences, behaviors, and collected data. Key metrics, including time on site, bounce rate, and conversion rate, serve as vital indicators of the success of personalized experiences. The overarching aim is to deliver content that resonates most with each user, thereby enhancing their overall experience and encouraging positive engagement with the site.

## Unveiling the advantages of Sitecore Content Cloud products

Sitecore's comprehensive suite, featuring the CDP and Personalize platforms, offers a myriad of benefits for businesses eager to embrace large-scale personalization:

- **Seamless omnichannel integration** – Through Sitecore's API-driven approach, businesses can effortlessly deliver personalized experiences across all digital channels, such as mobile apps and websites. This capability ensures a consistent and seamless user experience across various platforms, enhancing customer satisfaction and loyalty.
- **Leveraging advanced machine learning** – Sitecore's utilization of sophisticated machine learning algorithms enables the tracking of customer behaviors and the creation of predictive models. This empowers businesses to anticipate and meet user needs and preferences, facilitating highly personalized and resonant experiences.
- **Compliance with first-party cookies guidelines** – In line with recent mandates from prominent web browsers, including Google Chrome and Apple Safari, Sitecore complies with the requirement for the use of first-party cookies. This adherence guarantees privacy compliance and maintains data integrity, allowing for the responsible collection and utilization of customer data.

## Enhancing customer connections with Sitecore Personalize

### Empowering marketers with robust features

Sitecore Personalize is distinguished by its agility and precision, offering an extensive suite of features that enable marketers to craft personalized customer experiences across diverse touchpoints seamlessly:

- **Innovative real-time decision engine** – This feature capitalizes on advanced machine learning to instantaneously analyze user behavior and context, selecting the most pertinent content or actions to optimize engagement and conversion opportunities.
- **Comprehensive omnichannel delivery** – Sitecore Personalize supports an array of channels for personalization, including websites, mobile apps, email campaigns, and IoT devices, ensuring a cohesive and personalized experience for users across all points of contact.
- **User-friendly visual editor** – The platform's visual editor allows marketers to design and implement personalized content intuitively, promoting an environment where experimentation and optimization thrive.
- **Sophisticated segmentation capabilities** – By harnessing both explicit and implicit data, Sitecore enables the creation of detailed customer segments. This facilitates targeted marketing efforts and personalized experiences that are finely tuned to user needs and preferences.
- **Extensive integration opportunities** – With robust APIs and options for integration with third-party systems, Sitecore Personalize ensures that personalization efforts are enriched with comprehensive customer data, enhancing the relevance and impact of marketing campaigns.

The value of Sitecore Personalize to marketers lies in its ability to forge more meaningful and relevant connections with customers. By delivering personalized content in real-time, the platform significantly elevates customer satisfaction and loyalty while driving higher conversion rates and revenue.

Its omnichannel delivery capabilities guarantee a unified experience across all touchpoints, a critical factor in today's fragmented digital ecosystem. Advanced segmentation and the real-time decision engine empower marketers to anticipate and cater to customer needs more effectively, thereby enhancing brand perception and maximizing customer lifetime value.

Throughout the next part of this article, we will present fictionalized typical scenarios for using Sitecore Personalize and Sitecore CDP so that you can determine whether one or both products could help you reach your business goals.

### Enriching the retail experience

#### Scenario

Consider "TrendyCloset," a forward-thinking retail brand focused on modern apparel. Faced with the challenge of increasing conversion rates and average order values on its e-commerce platform, TrendyCloset aims to personalize the shopping experience to align with the distinct tastes and behaviors of each visitor.

#### Solution

Utilizing Sitecore Personalize, TrendyCloset taps into a rich collection of data from website interactions, including browsing patterns, previous purchases, and wish list entries. This enables the creation of a home page that mirrors individual user preferences, featuring products they are most likely to purchase. For instance, users with a history of exploring summer fashion options are greeted with banners highlighting the latest summer collection, while those interested in fitness attire find enticing promotions for activewear.

#### Outcome

This strategic alignment of content with user preferences leads to a notable increase in user engagement, conversion rates, and average order values. By delivering a shopping experience that feels personalized and valued, TrendyCloset encourages customer loyalty and repeat visits, reinforcing the brand's commitment to understanding and meeting the needs of its audience.

## Leveraging comprehensive insights with Sitecore CDP

### Maximizing marketing impact beyond website data

The Sitecore CDP stands as a formidable tool in the collection and organization of customer data from every interaction, assembling it into a unified customer profile that offers deep insights for marketers:

- **Advanced predictive analytics** – Utilizing AI, the Sitecore CDP anticipates future customer behaviors based on historical interactions, enabling marketers to devise proactive and personalized marketing strategies that resonate deeply with target audiences.
- **Visual customer journey mapping** – The platform provides intuitive visual tools that allow marketers to map out and analyze the customer journey across all touchpoints. This holistic view helps in identifying and enhancing key moments of engagement, ensuring that every interaction contributes positively to the customer experience.
- **Robust data governance and compliance** – Recognizing the importance of data integrity and trust, Sitecore CDP ensures compliance with global privacy regulations, such as GDPR and CCPA. This commitment to ethical data management not only safeguards customer information but also reinforces the brand's reputation and reliability.
- **Seamless real-time and historical data integration** – By amalgamating real-time behavioral data with comprehensive historical insights, Sitecore CDP offers a rich, 360-degree view of the customer. This depth of understanding enriches personalization efforts, allowing for the delivery of experiences that are both timely and highly relevant to each user.

### Diverse data ingestion methods

- **Stream API** – For capturing instantaneous actions like page views and searches.
- **Interactive API** – Tailored for dynamic interactions, including updates to orders and submissions through contact forms.
- **Batch API** – Facilitates the integration of bulk data from external sources, such as CRM platforms, enriching the customer profile with a wider array of insights.

The value of Sitecore CDP to marketers stems from its comprehensive view of the customer, which forms the foundation for delivering exceptionally personalized experiences. The platform's predictive analytics capabilities enable marketers to stay a step ahead of customer expectations, while journey mapping ensures that each touchpoint across the customer's journey is optimized for maximum engagement and conversion.

Strong data governance measures guarantee that personalization efforts are conducted ethically and in compliance with relevant regulations, fostering trust and loyalty among customers. Leveraging the full spectrum of features offered by Sitecore CDP, marketers can execute more effective campaigns, enhance customer retention, and achieve a higher return on investment.

### Advancing finance with tailored customer interactions

#### Scenario

"SecureFinance," an integrated provider of financial services ranging from savings accounts to sophisticated investment solutions, seeks to enhance customer retention and effectively cross-sell its products. The challenge lies in gaining a deep understanding of customer needs and preferences to accurately anticipate and recommend the most suitable financial products.

#### Solution

By harnessing the capabilities of Sitecore CDP, SecureFinance aggregates and analyzes data from a variety of touchpoints, including online interactions, branch visits, and customer service engagements. This comprehensive data collection enables the creation of detailed customer profiles, which serve as the basis for segmented and targeted marketing strategies. Personalized communications, informed by these insights, are then deployed across multiple channels, engaging customers with relevant product offerings and tailored financial advice.

#### Outcome

The strategic deployment of personalized content markedly improves customer engagement, leading to an increase in consultations, product adoption, and overall satisfaction. Customers feel valued and understood, fostering a sense of loyalty towards SecureFinance and its array of financial products and services.

## Synergizing personalization and data for unmatched customer experiences

The integration of Sitecore Personalize and the CDP creates a powerful ecosystem for personalization, where deep insights from comprehensive customer data inform real-time adaptive content strategies. This synergy not only enhances the efficiency of marketing efforts but also sets a new benchmark for customer engagement, paving the way for businesses to achieve unparalleled growth and customer loyalty.

### Transforming travel and hospitality with customized offers

#### Scenario

"GlobalGetaways," a pioneering travel agency, aims to increase off-season bookings and bolster customer loyalty through the provision of personalized travel packages and promotions.

#### Solution

By synergizing the data-driven insights from Sitecore's CDP with the dynamic content personalization capabilities of Sitecore Personalize, GlobalGetaways develops highly targeted marketing campaigns. These campaigns are meticulously tailored to match the unique travel preferences and histories of individual customers, ensuring that each offer is not only relevant but also timely.

#### Outcome

The personalized approach results in a significant uptick in bookings and enhanced customer loyalty, as customers appreciate the thoughtful attention to their preferences and the tailored travel suggestions provided. This positive reception encourages repeat bookings and promotes GlobalGetaways as a customer-centric brand in the competitive travel industry.

Leveraging Sitecore's Content Cloud products, including the Sitecore CDP and Personalize platforms, empowers businesses to redefine the digital experience through personalization. Companies can establish deeper connections with their audience by utilizing comprehensive data analytics, advanced machine learning, and integrated omnichannel strategies, fostering loyalty and driving conversions.

In the rapidly evolving digital landscape, the solutions offered by Sitecore emerge as essential tools for delivering exceptional, data-driven customer experiences, cementing their role as indispensable allies in pursuing digital marketing excellence.

Do you need a partner to explore Sitecore features with and help you work toward your goals? [Say hello](https://www.imarc.com/contact).



small_sitecore-trenches-blog-hero_2024-04-10-203956_lvcl.jpg

thumbnail_sitecore-trenches-blog-hero_2024-04-10-203956_lvcl.jpg

sitecore-trenches-blog-hero_2024-04-10-203956_lvcl.jpg

Dive into the crucial role of personalized web experiences, the principles of personalization, and the advantages that Sitecore features play in offering them.

In the trenches with new Sitecore features

# No groups claim? No Problem!
## How to use App Roles instead of groups.

While [implementing federated authentication for another client](https://www.frankcostoya.com/blog/locking-down-intranet), I ran into a new issue. This client was only intending on using Azure AD for the back-end, which simplied the process greatly. I only need to create a User Builder class, implement the correct configs for Identity Server, and some small config changes for sitecore and _voila!_ we should be all done. Right? Nope think again. When testing, we ran into an issue where _some_ users were not getting the appropriate sitecore roles assigned to them! When I checked their account, I could see the UserBuilder class ran perfectly, so why no roles?

I had the user send me the token that was being generated for them. Using [jwt.ms](https://jwt.ms) I was able to decode the token, and I noticed something a bit strange....

```json
"_claim_names": {
  "groups": "src1"
},
"_claim_sources": {
  "src1": {
    "endpoint": "https://graph.windows.net/0aad2ef9-8871-4f4b-9f84-bb6fb9dc58de/users/9091fa67-7c39-42f1-a6ab-d4094cceb2fb/getMemberObjects"
  }
}
```


_Well thats not what we were expecting!_

Normally we're used to seeing a groups claim with the GUID's from the azure groups.... 

So after doing some research, it seems the issues is **The Azure ID token is limited to 250 groups.**. Now that might seems like a lot, but many groups have child, or inherited groups, which can cause their to be many more groups than expected. We found out that the users that we're not recivieng the proper roles in sitecore, were because they exceeded this limit. 

## The Solution 

Forget groups! We're going to pivot to App Roles. Within your application registration, we can create App Roles. These are similar to groups, but are specific only to this application. This fits our use case, because we are only creating these groups to assign the Sitecore roles. 

**Configuring in Azure**

1. Go to the App Registration, and on the left press Manifest. Inside the manifest, changes the groupMembershipsClaims to "null" and save the manifest. 
2. On the left menu inside the App Registration, click App Roles. Here we create the roles we need. For each role press + Create app role and fill with the following values: 
    * Display Name: "Role name "
    * Allowed Member Types: "Users/Groups"
    * Value: "RoleValue" (for example this could be "SitecoreAdmin")
    * Description: "Assigns the admin role for sitecore."
    * If done correctly, you should now see your App Roles inside your applications Manifest. 

3. Time to assign the roles to users. Leave the App Registration, and search for "Enterprise Applications" in the top menu in the Azure Portal. Find and select the app registration for your sitecore. 
4. Inside the Enterprise Applications menu for our application, press "Users and Groups" on the left menu.
5. To add a user with their role: 
    * press Add user/group 
    * Under Users press the "None Selected" link.
    * Click all the users who need the Admin role.
    * Under Select a role* press the "None Selected" link.
    * You should see the roles we created in the previous steps, assign these roles to the users.
    * In the bottom left, press the assign button. 
    * Repeat these steps for other roles.

Great! Now you should see the token looks a little different. Instead of a groups claim, we now see a roles claim, containing the assigned roles we created in Azure! It should look a little like this: 

```json 
"roles": [
    "SitecoreAdmin",
    "WhateverValueYouPutForYourRoles"
],
```

**Updating the Identity Server Configuration**

Now we need to update the Identity Server configuration to accept these app roles instead of the groups guid. This process is fairly straight forward. 

**OLD GROUP CLAIM**
```xml
<GroupToRole type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
    <SourceClaims>
        <Claim1 type="groups" value="GROUP GUID HERE" />
     </SourceClaims>
      <NewClaims>
          <Claim1 type="role" value="sitecore\Role Name" />
       </NewClaims>
</GroupToRole>
```
**NEW ROLE CLAIM**
```xml
<RoleToRole type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
    <SourceClaims>
        <Claim1 type="http://schemas.microsoft.com/ws/2008/06/identity/claims/role" value="AppRoleValue" />
     </SourceClaims>
     <NewClaims>
         <Claim1 type="role" value="sitecore\Role Name" />
      </NewClaims>
</RoleToRole>
```

As you can see, really we are only changing the \<SourceClaims\> section to use the role schema as the type instead of the string groups. And we are changing the value property from the guid, to the value created when making the App Role. 

After that you should be all done! Your token will now pass App Roles, and your sitecore instance is ready to accept them! Congrats!


medium_1000_F_410483387_Mmu44BiATG5AnWd8RQWjY7lUENPPtWF5.jpg

small_1000_F_410483387_Mmu44BiATG5AnWd8RQWjY7lUENPPtWF5.jpg

thumbnail_1000_F_410483387_Mmu44BiATG5AnWd8RQWjY7lUENPPtWF5.jpg

1000_F_410483387_Mmu44BiATG5AnWd8RQWjY7lUENPPtWF5.jpg

Resolving a common issue with Sitecore and Azure AD where the groups claim is not being received. A follow up to my previous post: Locking Down an Intranet with Sitecore Identity Server and Azure AD

No groups claim? No problem!

# Locking Down an Intranet with Sitecore Identity Server and Azure AD



For one of my recent projects, I was tasked with creating an intranet for a client. This intranet had a requirement to use Azure Active Directory as it's authentication source. I've found plenty of articles online that do this by directly connecting your CM server to Azure AD, but what if you wanted to use Sitecore Identity Server to normalize your claims? Sitecore provides us by default with a Azure AD plugin, which pretty much works automatically for the backend, but what about front end users? I'll go through the steps it took me to set this up. 



## Register an Application in Azure

First things first, we need to create an application in Azure to allow any of this to happen. 

1. Inside your Azure Portal, go to App Registrations and press + New Registration.
2. Name your App, and select the supported account type the suits your needs. (The first option fits most use cases)
3. For Redirect UI, we need to put the address to the Identity Server with the /signin-oidc at the end of the URL. Example: *id.sitecoreserver.com/signin-oidc*. Also set the Platform type to: *Web*.
4. Press Register! You should now be on the Overview screen. 
5. On the Overview panel, write down your Client ID and Tenant ID. We'll need these later when we configure the Azure AD plugin in Identity Server. 
6. On the menu on the left, press the Manifest option. Inside the manifest, update the `groupMembershipClaims` value to `SecurityGroup`.
7. Lastly go to the Authentication menu option. Under *Implicit grant and hybrid flows* check the box next to ID tokens and press save. 

Great. Now your application is registered in Azure!



## Configuring the Identity Server Plugin 

Now we can move to configuring your Identity Server. Make sure your have the Client ID and Tenant ID from the previous step 5. Here we will take claims from the azure token on login, and normalize them for use with our sitecore. The benefit of this, is really we are decoupling CM from Azure. Should your organization in the future decide to go away from Azure, you can swap out the Azure AD plugin, for another SSO service plugin, and you wont have to make any changes to your CM. The Azure AD plugin is given to us from Sitecore by default, so thankfully, we only really need to make some configuration changes. If you in the future planned on integrating with another SSO, you might need to code up your own plugin. 

1. First we need to enter in some general settings. In the top area we need to change a few things    

   `<Enabled>true</Enabled>`  

   First we need to enable the Azure AD plugin, simply changed the `<Enabled> ` to `true`

   `  <ClientId>{Place ClientId here}</ClientId>`

​       `<TenantId>{Place TenantId here}</TenantId>`

​    Remember the ClientID and TenantID we wrote down earlier? You'll want to place them in the top section as well.  

2. After configuring the top area, the rest of the configuration is where we setup our claims. In the example config, you should see some default options. We'll keep it simple here for the sake of the example. In this snippet, were setting all users in a specific group as admin, and then all users in another group as part of the intranet/User role. (intranet is not a default domain and you may need to create it)

   ```xml
   <AzureADUserToAdminUser type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
     <SourceClaims>
   	<Claim1 type="groups" value="{Group ID for all Sitecore Administrators}" />
     </SourceClaims>
     <NewClaims>
   	<Claim1 type="http://www.sitecore.net/identity/claims/isAdmin" value="true" />
     </NewClaims>
   </AzureADUserToAdminUser>
   <GroupToRoleIntranetUser type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
     <SourceClaims>
   	<Claim1 type="groups" value="{Group ID for all users of the Intranet}" />
     </SourceClaims>
     <NewClaims>
   	<Claim1 type="role" value="intranet\User" />
     </NewClaims>
   </GroupToRoleIntranetUser>
   ```

3. On top of assigning security roles, we also normalize user information sent through the token.

   ```xml
   <UPNTransformation type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
     <SourceClaims>
       <Claim1 type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/upn" />
     </SourceClaims>
     <NewClaims>
       <Claim1 type="upn" />
     </NewClaims>
   </UPNTransformation>
   <NameTransformation type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
     <SourceClaims>
       <Claim1 type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name" />
     </SourceClaims>
     <NewClaims>
       <Claim1 type="name" />
     </NewClaims>
   </NameTransformation> 
   <EmailAddressTransformation type="Sitecore.Plugin.IdentityProviders.DefaultClaimsTransformation, Sitecore.Plugin.IdentityProviders">
     <SourceClaims>
       <Claim1 type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress" />
     </SourceClaims>
     <NewClaims>
       <Claim1 type="email" />
     </NewClaims>
   </EmailAddressTransformation>
   ```



This is just a small sample of the type of claims you can transform and normalize for sitecore. More information on this in Sitecore's official docs [here](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-manager/configure-federated-authentication.html). 

4. Ok, now that we've input our information from Azure AD, save this file and restart the Identity Server in IIS. (Note: Identity server does not automatically restart when you edit a configuration file like on CM/CD, if you make more changes, you'll need to restart the server to see its effects.) Once the server restarts, go ahead and navigate to your `/sitecore/login` on your CM server. You should now see a new Azure AD button in your sitecore login!

<img src="https://frankcostoya.nyc3.cdn.digitaloceanspaces.com/e9b4d0f57bc1dea83d61122380bc6660.png" style={{ transform: "scale(0.5)" }} />


   

   Now users with backend access should be able to login using the Azure account! This works great for content editors and developers, but what about your front end users? Next we'll tackle this. 

   

   ## Using the Azure AD Plugin for your Intranet Users

   To utilize the Azure AD plugin for your front-end users. We need to add some patch configurations. In this section we will register Identity Server as a sub-provider for the front end, edit the website configuration to require login, and automatically set the login path to route to Azure (by doing this, your front-end users don't need to see the Sitecore login page, and skip directly to Azure AD login.)

   

   1. First lets create a patch configuration to register the Azure AD login as a sub-provider. Make sure this is inside your App_Config/Include folder. 

      ```xml
      <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:role="http://www.sitecore.net/xmlconfig/role/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
      	<sitecore role:require="Standalone or ContentDelivery or ContentManagement">
      		<federatedAuthentication>
      			<identityProvidersPerSites>
      				<mapEntry name="all sites" type="Sitecore.Owin.Authentication.Collections.IdentityProvidersPerSitesMapEntry, Sitecore.Owin.Authentication">
      					<identityProviders hint="list:AddIdentityProvider">
      						<identityProvider ref="federatedAuthentication/identityProviders/identityProvider[@id='SitecoreIdentityServer/IdS4-AzureAd']" />
      					</identityProviders>
      				</mapEntry>
      			</identityProvidersPerSites>
      			<identityProviders>
      				<identityProvider id="SitecoreIdentityServer/IdS4-AzureAd" type="Sitecore.Owin.Authentication.Configuration.DefaultIdentityProvider, Sitecore.Owin.Authentication">
      					<param desc="name">$(id)</param>
      					<param desc="domainManager" type="Sitecore.Abstractions.BaseDomainManager" resolve="true" />
      					<caption>Log in with Sitecore Identity: Azure AD</caption>
      					<icon>/sitecore/shell/themes/standard/Images/24x24/msazure.png</icon>
      					<domain>intranet</domain>
      				</identityProvider>
      			</identityProviders>
      		</federatedAuthentication>
      	</sitecore>
      </configuration>
      ```

      This configuration should work for the default implementation. What this configuration does is register your Azure AD plugin on Identity Server to be used on CM on the front-end, allowing it to be used for more than just the back-end authentication.

   2. Next, we need to edit your site configuration to require login, and tell it where users will login. This will vary depending on how your site is configured, but the general gist is under your `<site>` node you'll want to add `requireLogin="true"` and more importantly, you'll want to add `loginPage="$(loginPath)website/SitecoreIdentityServer/IdS4-AzureAd"` where "website" is your website name. The `(loginpath)` should be set by default if your installation that comes with identity server.

      

   After you add these patch configurations, go ahead and deploy to your CM and CD servers, and voila! Your site now will now automatically redirect users to login through Azure Active Directory! 

   

   Thanks for reading through, and I hope this works great for you. Should you run into any issues, feel free to message me on [LinkedIn](https://www.linkedin.com/in/frankiecostoya/) or even reach out to me via [email](mailto:fcostoyaprograms@gmail.com). 

   

   

   
   
   

   



small_locks.jpg

thumbnail_locks.jpg

locks.jpg

In this article, we setup our website to require federated authentication on the front-end using Azure Active Directory!

Hi, I'm Frank Costoya. I'm a full stack web developer.

Here on my website, you can find some information about the technologies I use, the projects and clients i've worked with, and some of my thoughts on my blog.

Latest Posts

Migrating from React to Next.js in a Sitecore World: Overcoming the Component Factory Hurdle

Pros and Cons of Using AI for Testing: A Developer's Journey with CenariusCMS

Engineering spotlight: Building a headless WordPress site

In the trenches with new Sitecore features

No groups claim? No problem!

Locking Down an Intranet with Sitecore Identity Server and Azure AD

follow us