Understanding Authentication: SAML vs. JWT vs. OAuth

In our journey of building a full-stack application with React, Vite, and Express, authentication is a crucial component that ensures secure access to our application’s resources. In this article, we’ll delve into three popular authentication mechanisms: SAML, JWT, and OAuth. We’ll explore their basics, differences, and use cases, ultimately understanding why SAML is chosen for this project.

Basics of SAML, JWT, and OAuth

SAML (Security Assertion Markup Language) is an open standard for exchanging authentication and authorization data between parties, specifically between an identity provider (IdP) and a service provider (SP). It enables single sign-on (SSO), allowing users to authenticate once and gain access to multiple applications.

JWT (JSON Web Token) is a compact, URL-safe means of representing claims to be transferred between two parties. It’s commonly used for authentication and information exchange. A JWT consists of three parts: Header, Payload, and Signature. JWTs are often used in stateless authentication, where the server doesn’t store session information.

OAuth (Open Authorization) is an open standard for access delegation commonly used as a way to grant websites or applications limited access to user information without exposing passwords. OAuth 2.0 is the latest version and is widely adopted for authorization scenarios.

Use Cases for SAML in Enterprise Authentication

SAML is predominantly used in enterprise environments for single sign-on (SSO) solutions. Here are some common use cases:

  1. Enterprise SSO: Companies use SAML to enable SSO across multiple internal and third-party applications. This simplifies the login process for users and enhances security by centralizing authentication.
  2. B2B Integrations: Businesses integrate with partners and vendors using SAML to facilitate secure and seamless access to shared applications and services.
  3. Educational Institutions: Universities and schools use SAML for SSO, allowing students and staff to access various educational resources and platforms with a single login.

Advantages of SAML for Third-Party Authentication

SAML offers several advantages for third-party authentication:

  1. Single Sign-On (SSO): Users can access multiple applications with a single login, improving user experience and productivity.
  2. Enhanced Security: SAML provides strong security features, including encryption and digital signatures, ensuring that authentication data is securely exchanged.
  3. Interoperability: SAML is widely supported by enterprise applications and identity providers, facilitating seamless integration with existing systems.
  4. Centralized Authentication: Centralizing authentication with SAML simplifies user management and enhances security by allowing organizations to enforce consistent authentication policies.

Implementing SAML Authentication in a React Application

In this section, we’ll implement a simple SAML-based authentication flow in our React application using Okta as the identity provider. We’ll also protect Express API routes to ensure only authenticated users can access them.

Setting Up Okta for SAML Authentication
  1. Create an Okta Developer Account: Sign up for a free Okta developer account at developer.okta.com.
  2. Create a New Application in Okta:
    • Log in to your Okta dashboard.
    • Navigate to Applications and click Add Application.
    • Select Web and click Next.
    • Configure the application with the following settings:
      • Name: My Fullstack App
      • Login redirect URIs: http://localhost:3000/callback
      • Logout redirect URIs: http://localhost:3000
    • Click Done to create the application.
  3. Configure SAML Settings:
    • In the newly created application, navigate to the Sign On tab.
    • Click Edit and configure the SAML settings as follows:
      • Single sign-on URL: http://localhost:5000/sso/callback
      • Audience URI (SP Entity ID): http://localhost:5000
    • Save the changes.
Setting Up Express for SAML Authentication

1. Install Required Packages (terminal): 

cd backend
npm install passport passport-saml express-session

2. Configure Passport with SAML: Create a file named auth.js in the backend directory and add the following code:

const passport = require('passport');
const SamlStrategy = require('passport-saml').Strategy;

passport.use(new SamlStrategy({
  path: '/sso/callback',
  entryPoint: 'https://{yourOktaDomain}/sso/saml',
  issuer: 'http://localhost:5000',
  cert: '-----BEGIN CERTIFICATE-----\nMIID...yourOktaCertificate...\n-----END CERTIFICATE-----'
}, (profile, done) => {
  return done(null, profile);
}));

passport.serializeUser((user, done) => {
  done(null, user);
});

passport.deserializeUser((user, done) => {
  done(null, user);
});

3. Initialize Passport and Express Session: Update server.js to initialize Passport and configure session handling:

const express = require('express');
const session = require('express-session');
const passport = require('passport');
require('./auth');

const app = express();
const PORT = process.env.PORT || 5000;

app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());

app.get('/login',
  passport.authenticate('saml', {
    successRedirect: '/',
    failureRedirect: '/login'
  })
);

app.post('/sso/callback',
  passport.authenticate('saml', {
    failureRedirect: '/login',
    failureFlash: true
  }),
  (req, res) => {
    res.redirect('/');
  }
);

app.get('/api', (req, res) => {
  if (!req.isAuthenticated()) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  res.json({ message: "Hello from Express!" });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
Protecting Routes in Express

To ensure that only authenticated users can access certain API routes, you can create a middleware function that checks if the user is authenticated:

function ensureAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return next();
  }
  res.status(401).json({ message: 'Unauthorized' });
}

app.get('/api/protected', ensureAuthenticated, (req, res) => {
  res.json({ message: 'This is a protected route' });
});
Connecting React with SAML Authentication
  1. Add Login and Protected Components: In your React app, create two new components, Login.js and Protected.js:
// Login.js
import React from 'react';

const Login = () => {
  return (
    <div>
      <h2>Login</h2>
      <a href="http://localhost:5000/login">Login with SAML</a>
    </div>
  );
};

export default Login;
// Protected.js
import React, { useEffect, useState } from 'react';

const Protected = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/protected')
      .then(response => response.json())
      .then(data => setMessage(data.message))
      .catch(() => setMessage('You are not authorized to view this content.'));
  }, []);

  return <div>{message}</div>;
};

export default Protected;
  1. Update App Component: Modify the App.js file to include routes for the login and protected components:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './Login';
import Protected from './Protected';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/protected" component={Protected} />
        <Route path="/" exact>
          <div>
            <h1>Welcome to My Fullstack App</h1>
            <a href="/login">Login</a>
          </div>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;
  1. Start the React Development Server: Run the React development server to see the changes:
npm run dev

Conclusion

In this article, we’ve explored the basics of SAML, JWT, and OAuth, understanding their differences and use cases. We’ve also implemented a simple SAML authentication flow using Okta in our React application, protected Express API routes, and ensured secure access for authenticated users.

SAML is chosen for this project due to its robust security features, support for SSO, and widespread adoption in enterprise environments. In the next article, we will dive deeper into the SAML authentication flow and user session management. Stay tuned to continue expanding your full-stack development skills.

Happy coding!

Back to Top