Giter VIP home page Giter VIP logo

vincentdelitz / tutorial-passkeys-php-symfony-webcomponent Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nicolaistein/tutorial-webcomponent-integration

1.0 1.0 0.0 143 KB

Complete tutorial for the integration of the Corbado web component for passkey-first authentication using PHP Symfony.

Home Page: https://www.corbado.com

Shell 3.88% PHP 83.72% Dockerfile 3.28% Twig 9.12%
authentication faceid fido2 passkey passkeys passkeys-demo php php-symfony touchid webauthn

tutorial-passkeys-php-symfony-webcomponent's Introduction

Complete PHP Symfony integration example for Corbado's passkey-first web component

⚠️ This repository is no longer maintained. Please have a look at our new PHP Symfony passkeys repository, which is the successor of this repository.

This is a sample implementation of frontend and backend where the Corbado web component is integrated.

Note: In this tutorial a customer system is created with some pre-existing password-based users. Have a look at our docs to see the integration if you don't have any users yet.

1. File structure

├── ...
├── config      
|   └── routes.yaml                 # Assigns paths to controller methods    
├── src                             
│   ├── Controller                  
│   │   ├── WebhookController.php   # Manages endpoints for webhook
│   └── └── AppController.php       # Manages endpoints for application
├── templates                     
│   ├── home.html.twig              # Home page which you only get to see if you are logged in
│   ├── login.html.twig             # Login page which contains the Corbado web component; Acts as landing page if you are not logged in
├── .env                            # Contains all Symfony environment variables
└── ...

2. Setup

⚠️ If you are using a Windows machine: Make sure to execute git config --global core.autocrlf false before cloning this repository to prevent git from changing the line endings of the bash scripts. (Docker will not be able to find the scripts if git does this)

2.1. Prerequisites

Please follow steps 1-3 on our Getting started page to create and configure a project in the developer panel.

2.2. Configure environment variables

Use the values you obtained in step 2.1 from the developer panel. to configure the following variables inside .env:

  1. PROJECT_ID: The project ID.
  2. API_SECRET: The API secret.
  3. CLI_SECRET The CLI secret.

2.3. Start Docker containers

Note: Before continuing, please ensure you have Docker installed and accessible from your shell.

Use the following command to start the system:

docker compose up

Note: Please wait until all containers are ready. This can take some time.

2.4. Error check (optional)

To verify that your instance is running without errors enter http://localhost:8000/ping in your browser. If "pong" is displayed, everything worked.

image

3. Usage

After step 2.3. your local server should be fully working.

3.1. Test authentication

If you now visit http://localhost:8000, you should be forwarded to the /login page:

image

You can login with one of the existing accounts or sign-up yourself.

Name Email Password
demo_user [email protected] demo12
max [email protected] maxPW
john [email protected] 123456

When authenticated you will be forwarded to the home page:

image

3.2. View all users

On localhost:8081 a PHPMyAdmin instance is running where you can view all registered users:

image

tutorial-passkeys-php-symfony-webcomponent's People

Contributors

naetraga avatar nicolaistein avatar vincentdelitz avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.