https://github.com/santiblanko/keycloak-nextjs-auth

A project with next + keycloak authentication + tailwind installed. Ideal if you neeed a fast auth in your next project or inspiration.
https://github.com/santiblanko/keycloak-nextjs-auth

Last synced: about 1 month ago
JSON representation

A project with next + keycloak authentication + tailwind installed. Ideal if you neeed a fast auth in your next project or inspiration.

• Host: GitHub
• URL: https://github.com/santiblanko/keycloak-nextjs-auth
• Owner: santiblanko
• Created: 2022-09-25T00:48:18.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-25T04:54:52.000Z (almost 2 years ago)
• Last Synced: 2024-02-10T10:10:49.764Z (5 months ago)
• Language: JavaScript
• Homepage: keycloak-nextjs-example.vercel.app
• Size: 201 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Lists

• awesome-keycloak - NextJS + tailwind + keycloak integration

README

        
# Keycloak + NextJS + Tailwind.

Check this [example](https://keycloak-nextjs-example-santiblanko.vercel.app).

In this example I create a project with next + keycloak authentication + tailwind installed. Ideal if you neeed a fast auth in your next project. 

You can use a free keycloak server like [cloud iam](https://www.cloud-iam.com/).

I don't want to use a library for manage auth. I try to implement auth with keycloak from sratch and this is the result.

I create a next middleware for intercept the auth pages and validate the token of protected pages.

Also I call this other endpoint for authenticate the request and keycloak call a callback endpoint with the tokens and then create cookies.

```

const signInUrl = `${props.KEYCLOAK_BASE_URL}/auth/realms/${props.KEYCLOAK_REALM}/protocol/openid-connect/auth?client_id=${props.KEYCLOAK_CLIENT_ID}&scope=openid%20profile%20email%20offline_access&response_type=code&redirect_uri=${props.KEYCLOAK_REDIRECT_URI}`;

```

If you need a keycloack theme with tailwind integrated see my other [repo](https://keycloak-nextjs-example-santiblanko.vercel.app).

If you want to add auth to a container check [my other implementation with oauth2proxy ](https://keycloak-nextjs-example-santiblanko.vercel.app).

Also I create a tailwindui theme for keycloak. check the [repo](https://github.com/santiblanko/tailwind-keycloak-theme).

## Env variables

```

KEYCLOAK_CLIENT_SECRET=wITlOh2V8bOGFKx3mD3RDk0nD1FNYb6Q

KEYCLOAK_CLIENT_ID=my-client

KEYCLOAK_BASE_URL=http://localhost:8080

KEYCLOAK_REALM=master

```

## Run.

```

yarn dev

```

If this implementation looks great you can share a beer using [patreon](https://patreon.com/santiblanko?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator) or send me bitcoins.

### Bitcoin direction: 

31p39e3AtdEv8T2aU9y9D1XH9Wc5HEtRte

I will be enormously grateful. :) Also I am available for capacitations, keycloak courses and projects!! 

Whatsapp :) +573233729549