Redirect oauth2 proxy to custom page in case of 500 server error

Question

I would like to either be able to customise the existing 500 error page OR in case it is not possible, redirect to my custom page.

I am using Okta oidc and everything is setup on Kubernetes cluster. I could not find where I can configure this 500 server error page.

Below is my POC for a somewhat similar setup but this is using github provider.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: demo
spec:
  selector:
    matchLabels:
      app: demo
  replicas: 1
  template: 
    metadata:
      labels:
        app: demo
        version: new
    spec:
      containers:
      - name: nginx
        image: nikk007/nginxwebsite
---
apiVersion: v1
kind: Service
metadata:
  name: myservice
spec:
  selector:
    app: demo
  ports:
    - name: http
      port: 80
      nodePort: 30080
  type: NodePort
---
apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
  name: ingress-gateway-configuration
spec:
  selector:
    istio: ingressgateway # use Istio default gateway implementation
  servers:
  - port:
      number: 443
      name: https
      protocol: HTTPS
    tls:
      mode: SIMPLE
      credentialName: selfsigned-cert-tls-secret  
    hosts:
    - "*"   # Domain name of the external website
---
apiVersion: cert-manager.io/v1
kind: Issuer
metadata:
  name: test-selfsigned
  namespace: istio-system
spec:
  selfSigned: {}
---
apiVersion: cert-manager.io/v1
kind: Certificate
metadata:
  name: selfsigned-cert
  namespace: istio-system
spec:
  dnsNames:
    - mymy.com
  secretName: selfsigned-cert-tls-secret
  issuerRef:
    name: test-selfsigned
---
kind: VirtualService
apiVersion: networking.istio.io/v1alpha3
metadata:
  name: myvs  # "just" a name for this virtualservice
  namespace: default
spec:
  hosts:
    - "*"  # The Service DNS (ie the regular K8S Service) name that we're applying routing rules to.
  gateways:
  - ingress-gateway-configuration
  http:
    - route:
        - destination:
            host: oauth2-proxy # The Target DNS name
            port:
              number: 4180
---
kind: DestinationRule       # Defining which pods should be part of each subset
apiVersion: networking.istio.io/v1alpha3
metadata:
  name: grouping-rules-for-our-photograph-canary-release # This can be anything you like.
  namespace: default
spec:
  host: myservice.default.svc.cluster.local # Service
  subsets:
    - labels:   # SELECTOR.
        version: new # find pods with label "safe"
      name: new-group
    - labels:
        version: old
      name: old-group
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: oauth2-proxy
  name: oauth2-proxy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: oauth2-proxy
  template:
    metadata:
      labels:
        app: oauth2-proxy
    spec:
      containers:
      - args:
        - --provider=github
        - --email-domain=*
        - --upstream=file:///dev/null
        - --http-address=0.0.0.0:4180
        # Register a new application
        # https://github.com/settings/applications/new
        env:
        - name: OAUTH2_PROXY_CLIENT_ID
          value: <myapp-client-id>
        - name: OAUTH2_PROXY_CLIENT_SECRET
          value: <my-app-secret>
        - name: OAUTH2_PROXY_COOKIE_SECRET
          value: <cookie-secret-I-generated-via-python>
        image: quay.io/oauth2-proxy/oauth2-proxy:latest
        imagePullPolicy: Always
        name: oauth2-proxy
        ports:
        - containerPort: 4180
          protocol: TCP
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: oauth2-proxy
  name: oauth2-proxy
spec:
  ports:
  - name: http
    port: 4180
    protocol: TCP
    targetPort: 4180
  selector:
    app: oauth2-proxy

I am using cert-manager for self signed certificates. I am using istio ingress gateway instead of k8s ingress controller. Everything is working fine and I am able to access istio gateway, which directs to oauth2-proxy page, which directs to github login.

In case there is issue with authorization provider, then we get an error 500 page via outh2-proxy. I want to configure oauth2-proxy to redirect to my custom page(or i would like to configure the oauth2-proxy internal html for error page) in case of 500 error. I tried kubectl exec into oauth2-proxy pod but I could not locate their html. Moreover, I dont have root access inside oauth2-proxy pod.

If my own app throws 500 error then I can handle it by configuring its nginx.

Answer 1

I finally found a solution. The below method can be used even when we are using oauth2-proxy image out of the box.

1. Create a custom error page(error.html)

    <!DOCTYPE html>
   <html>
   <head>
   <style>
   body {
     background-image: url('error.png');
   }
   </style>
   </head>
   <body>
   </body>
   </html>
   

2. Create a configmap from this file:

    kubectl create cm oauth2-proxy-error-page --from-file=error.html
   

3. create a volume in oauth2-proxy deployment using this configmap:

      volumes:
       - name: oauth2-proxy-error-page
         configMap:
           name: oauth2-proxy-error-page
   

4. Mount this volume at some path:

      volumeMounts:
       - name: oauth2-proxy-error-page
         mountPath: /usr/share/oauth2-proxy/error.html
         subPath: error.html
   

5. Add "custom-templates-dir" in args section of deployment and provide the mount path of custom error page here:

    containers:
    - args:
      - --provider=github
      - --email-domain=*
      - --upstream=file:///dev/null
      - --http-address=0.0.0.0:4180
      - --custom-templates-dir=/usr/share/oauth2-proxy
   

That's it!

Note: a custom sign_in.html page can also be provided using similar approach.