{"id":22860116,"url":"https://github.com/el-abdel/sak","last_synced_at":"2025-04-30T18:03:36.584Z","repository":{"id":37584468,"uuid":"249939653","full_name":"el-abdel/SAK","owner":"el-abdel","description":"SAK Skeleton App: Symfony (API) - Angular (WEB) - Keycloak (Identity and access manager)","archived":false,"fork":false,"pushed_at":"2023-02-28T23:27:15.000Z","size":3944,"stargazers_count":7,"open_issues_count":12,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T18:34:37.004Z","etag":null,"topics":["angular","architecture","keycloak","oidc","stack","symfony"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/el-abdel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-25T09:43:19.000Z","updated_at":"2024-04-18T17:08:48.000Z","dependencies_parsed_at":"2023-02-15T08:31:43.059Z","dependency_job_id":null,"html_url":"https://github.com/el-abdel/SAK","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el-abdel%2FSAK","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el-abdel%2FSAK/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el-abdel%2FSAK/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el-abdel%2FSAK/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/el-abdel","download_url":"https://codeload.github.com/el-abdel/SAK/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758162,"owners_count":21638988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","architecture","keycloak","oidc","stack","symfony"],"created_at":"2024-12-13T09:09:22.275Z","updated_at":"2025-04-30T18:03:36.530Z","avatar_url":"https://github.com/el-abdel.png","language":"TypeScript","readme":"# SAK\n\nSkeleton stack (for development purpose) built in Symfony, Angular and Keycloak, running on Docker containers using docker-compose tool.\n\n\n![SAK Architecture](./docs/screenshots/sak-architecture.png)\n\n## Features\n- Angular skeleton application following best practices\n- API with symfony and Api-plateform\n    - REST\n    - GraphQL (switch to branch [graphql](https://github.com/el-abdel/SAK/tree/graphql))\n- Identity manager (Keycloak)\n- OIDC Authentication (Code Flow + PKCE)\n- Two-Factor Authentication (Password + OTP)\n- API Authentication/Authorization (Bearer authentication with access token using Keycloak)\n\n## Requirement\n\n- Docker\n- NodeJs/Npm\n\n## Installation\n\nFirst, clone this repository:\n\n```\ngit clone https://github.com/el-abdel/SAK.git\n```\n\nNext got to **sak-docker** folder.\n\n```\ncd sak-docker\n```\n\nThen run this command to build your environment.\n\n```\ndocker-compose -f docker-compose/sak.yml up\n```\n\n\u003e Do not forget to add virtual hosts (keycloak.local, sak-api.local, phpmyadmin.local) in your /etc/hosts file.\n\n#### Configuring Symfony App\n\nFor better performance the **vendor** folder is not shared in our volumes, so we need to install our dependencies in the container. To do so run:\n\n```\ndocker-compose -f docker-compose/sak.yml run --rm composer install --ignore-platform-reqs\n```\nCreate and init database:\n\n1. connect to app container:\n    ```\n    docker exec -it sak-api bash\n    ```\n\n2. create the database (in the container run the following commands):\n    ```\n    cd sak-api\n    php bin/console doctrine:database:create\n    php bin/console doctrine:schema:update -f\n    ```\n\n\nYou can visit your Symfony application on the following URL: [http://sak-api.local/api](http://sak-api.local/api) \n\n#### Configuring Angular App\n\nInstall Angular CLI (Optional):\n\n```\nnpm install -g @angular/cli\n```\n\nInstall app. dependencies:\n\n```\ncd sak-web\nnpm install\n```\nAnd finally run you angular application locally using:\n\n```\nng serve\n```\nOR\n```\nnpm start\n```\n\u003e Do not forget to verify Keycloak and Api configuration under `sak-web/src/environments/environment.ts`.\n\nYou can visit your Angular application on the following URL: [http://localhost:4200](http://localhost:4200)\n\n#### Configuring Keycloak\n\nAfter building and running your containers, visit keycloak admin console on this URL: [http://keycloak.local:8080/auth](http://keycloak.local:8080/auth)\n\n1. You need to create a realm, go to ```Realm list \u003e Add realm```\n    ![Create a realm](./docs/screenshots/create-a-realm.png)\n\n2. Enable Two-Factor Authentication\n    1. Enforce new users to configure OTP\n        \u003e Open Keycloak admin page, open `Authentication`, go to the `Required Actions` tab, then Click on the `Default Action` in the Configure OTP row.\n\n        ![Enable Otp](./docs/screenshots/enable-otp.png)\n\n    2. OTP Policy configuration\n        \u003e Open Keycloak admin page, open `Authentication`, go to the `OTP Policy` tab. \u003cbr\u003e\n         **Recommended OTP Policy:** \u003cbr\u003e\n         Time based OTP Type (TOTP) is considered a more secure. TOTP requires time be synchronized between Keycloak server and an end user device.\u003cbr\u003e\n         If the server and the device cannot be synchronized use Counter Based type (HOTP).\u003cbr\u003e\n         Configure Look Ahead Window to 3.\u003cbr\u003e    \n         _Check the [keycloak documentation](https://www.keycloak.org/docs/latest/server_admin/index.html#otp-policies) related to OTP Policies for more details._\n\n        ![Otp Policy](./docs/screenshots/otp-policy.png)\n\n\n3. Create clients by going in ```Main menu \u003e Clients \u003e Create```\n    \u003e We need to create two clients one for Authorization and another one for Authentication\n\n    ![Create a client](./docs/screenshots/create-a-client.png)\n\n4. Configure authentication client\n    \u003e you can configure the client by going in ```Main menu \u003e Clients \u003e [Your client]```. The authentication client Access type is **public**.\n\n    ![Config Authentication client](./docs/screenshots/config-authentication-client.png)\n\n5. Configure authorization client\n    \u003e you can configure the client by going in ```Main menu \u003e Clients \u003e [Your client]```. The authorization client Access type must be **bearer-only**.\n    \n    ![Config Authorization client](./docs/screenshots/config-autorization-client.png)\n    \n    \u003e You can find the client secret in **Credentials** tab\n\n    1. Add a role to authorization client:\n\n        \u003e In keycloak, roles are an abstraction of permissions for our application (used in security.yaml). In our case we need to define a role named **ROLE_API**. \u003cbr\u003e\n          You can configure it in authorization client ```Main menu \u003e Clients \u003e [Your client] \u003e Roles```\n\n        ![Create Role](./docs/screenshots/create-a-role.png)\n\n6. Create a user\n    1. From the menu, click **Users** to open the user list page.\n\n    2. On the right side of the empty user list, click **Add User** to open the Add user page.\n\n        ![Create user](./docs/screenshots/add-user.png)\n\n    3. Click the Credentials tab to set a temporary password for the new user. then set a new password for this user.\n\n        \u003e This password is temporary and the user will be required to change it at the first login. If you prefer to create a password that is persistent, flip the **Temporary** switch to **Off** and click **Set Password**.\n\n7. Assign a role to a use\n    \n    \u003e To add a role, go to ```Main menu \u003e Users \u003e View all users \u003e [Some User] \u003e Role Mappings```.\n\n    1. In the **Client Roles** dropdown, select your authorization client that contains our role(s).\n    2. Select Role **ROLE_API** in **Available Roles** list, then click **Add selected** to assign role to the user.\n\n\n#### Securing API\n\nFor this part you can refer to my package [ABELkeycloakBearerOnlyAdapterBundle](https://github.com/el-abdel/ABELkeycloakBearerOnlyAdapterBundle), where you'll find a step by step documentation on how to secure your Symfony App using Keycloak.\n\n#### Securing Angular App\n\nTo implement authentication in Angular application we are using: [keycloak-angular](https://github.com/mauriciovigolo/keycloak-angular), you can visit the package repository for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fel-abdel%2Fsak","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fel-abdel%2Fsak","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fel-abdel%2Fsak/lists"}