![[AWS]Implement a minimal web browser with authentication using AWS Cognito + CloudFront](/uploads/2025/05/6819dc2beae16.png)
Introduction
Thank you for always reading our articles!
When developing in-house, you may need to check the operation of a web browser. In addition, you may want to set up authentication while taking security into consideration, but you may not want to implement it in a cumbersome way.
I wanted to implement a web browser with authentication functionality in my own in-house development with minimal configuration. I realized that by using AWS Cognito + CloudFront, I could implement a web browser with authentication functionality that would be satisfactory for in-house testing.
I think I'll have a chance to use it in the future, so I'd like to leave this article here.
Target Audience
- For those who want to easily implement a web browser with authentication functionality.
- Those looking for a way to manage web browsers for in-house testing.
- Those who want to catch up on service integration.
Composition
Tried Actions
In order to build this site, I created a test page in advance.
- Sample Code
</span>
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
Shark Inc. | FinOps Shark - Innovative Financial Solutions
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
display: flex;
align-items: center;
}
.logo-icon {
width: 40px;
height: 40px;
margin-right: 10px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 15 L80 40 L80 70 L50 85 L20 70 L20 40 Z" fill="%233949ab" stroke="white" stroke-width="3"/><path d="M40 50 L60 30 L60 70 Z" fill="white"/></svg>') no-repeat center;
background-size: contain;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #283593, #3949ab);
color: white;
padding: 8rem 0 4rem;
margin-top: 5rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
}
.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hero-text {
flex: 1;
max-width: 600px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-button {
display: inline-block;
padding: 1rem 2.5rem;
background: #00bcd4;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,188,212,0.3);
}
.hero-image {
flex: 1;
text-align: center;
}
.shark-animation {
width: 400px;
height: 300px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M50 150 Q200 80 350 150 Q200 220 50 150" fill="%231e88e5" stroke="white" stroke-width="3"/><circle cx="100" cy="130" r="8" fill="white"/><path d="M350 150 L380 130 L380 170 Z" fill="%231e88e5" stroke="white" stroke-width="2"/></svg>') no-repeat center;
background-size: contain;
animation: swim 3s ease-in-out infinite;
}
@keyframes swim {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Features Section */
.features {
padding: 5rem 0;
background: #f8f9fa;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #283593;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #00bcd4;
}
.feature-card h3 {
color: #283593;
margin-bottom: 1rem;
}
/* Services Section */
.services {
padding: 5rem 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.service-item {
display: flex;
align-items: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 10px;
transition: background 0.3s;
}
.service-item:hover {
background: #eceff1;
}
.service-icon {
font-size: 2.5rem;
margin-right: 1.5rem;
color: #283593;
}
/* Stats Section */
.stats {
background: linear-gradient(135deg, #283593, #3949ab);
color: white;
padding: 4rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.stat-item h3 {
font-size: 3rem;
margin-bottom: 0.5rem;
}
/* CTA Section */
.cta-section {
background: #00bcd4;
color: white;
padding: 4rem 0;
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.cta-secondary {
background: white;
color: #00bcd4;
padding: 1rem 2.5rem;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: transform 0.3s;
}
.cta-secondary:hover {
transform: translateY(-2px);
}
/* Footer */
footer {
background: #1a237e;
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h4 {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-section ul li a:hover {
color: white;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #283593;
color: #ccc;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero-content {
flex-direction: column;
text-align: center;
}
.shark-animation {
width: 300px;
height: 200px;
margin-top: 2rem;
}
.features-grid,
.services-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
class="container">
class="logo">
class="logo-icon">
Shark Inc.
class="nav-links">
href="#services">Services
href="#features">Features
href="#about">About Us
href="#contact">Contact
class="hero">
class="container">
class="hero-content">
class="hero-text">
FinOps Shark
Financial solutions with speed and precision.Sharply accelerate your business growth.
href="#contact" class="cta-button">Request Free Consultation
class="hero-image">
class="shark-animation">
class="features" id="features">
class="container">
class="section-title">Shark Features
class="features-grid">
class="feature-card">
class="feature-icon">⚡
High-Speed Processing
AI-powered high-speed data processing provides real-time financial insights, supporting quick decision-making.
class="feature-card">
class="feature-icon">🔒
Security
Bank-level security thoroughly protects your valuable data, ensuring worry-free usage.
class="feature-card">
class="feature-icon">📈
Growth Support
Data-driven precise advice powerfully backs up your business growth.
class="services" id="services">
class="container">
class="section-title">Our Services
class="services-grid">
class="service-item">
class="service-icon">💰
Financial Consulting
Expert financial analysis and optimization proposals to achieve improved profitability.
class="service-item">
class="service-icon">🔄
Automation Solutions
Accounting process automation significantly improves operational efficiency.
class="service-item">
class="service-icon">📊
Real-time Analytics
Constantly monitor the latest financial situation, enabling quick management decisions.
class="service-item">
class="service-icon">🎯
Strategy Planning Support
Data-based strategy planning supports certain growth.
class="stats">
class="container">
class="stats-grid">
class="stat-item">
500+
Client Companies
class="stat-item">
35%
Average Cost Reduction
class="stat-item">
24/7
Support System
class="stat-item">
99.9%
System Uptime
class="cta-section" id="contact">
class="container">
Ready to experience FinOps Shark?
Request a free consultation and we'll propose the optimal solution for your company.
href="#" class="cta-secondary">Request Free Consultation
class="container">
class="footer-content">
class="footer-section">
Shark Inc.
Accelerating business growthwith innovative financial solutions
class="footer-section">
Services
href="#">Financial Consulting
href="#">Automation Solutions
href="#">Real-time Analytics
href="#">Strategy Planning Support
class="footer-section">
Company Information
href="#">About Us
href="#">Careers
href="#">News
href="#">Contact Us
class="footer-section">
Legal Information
href="#">Terms of Service
href="#">Privacy Policy
href="#">Legal Notices
class="footer-bottom">
© 2025 Shark Inc. All Rights Reserved.
Enter fullscreen mode
Exit fullscreen mode
Image
Amazon S3 Settings
Prepare an S3 bucket with website hosting enabled.
Store a test page in the bucket.
(All other settings are default.)
CloudFront Settings
Set it up so that it links to the S3 bucket you created earlier.
For security reasons, we'll also set up OAC.
Warning
After configuring OAC, you must update the S3 bucket policy.
Notice
Unless you select Redirect HTTP to HTTPS as the viewer protocol policy, the HTTPS connection will not be established.
Warning
The actual access path is distribution domain name/index.html.
Cognito Settings
Configure the user pool and login user.Clicking the Show login page button will display the login screen.
All you have to do is enter your login information and a web browser will appear.
Impressions
If you are using it in a testing environment, I think S3 + CloudFront + Cognito is easy to use. On top of that, you can combine it in a wide range of ways, such as pipeline settings and code signing with Signer.Thank you for reading the article to the end.